Reac版本的Ant Design树形控件的使用、搜索关键字标红、只显示搜索匹配中的数据

实现效果（需求）：

思路方法：

先去antd官网看看有没有满足需求的轮子，避免重复造轮子
拷贝数据，删掉没匹配中的数据，当搜索关键字为空时再还原数据
通过样式隐藏没匹配上的子节点

代码实现

 const loop: any = (data: TreeObj[]) => {return (data?.map((item: TreeObj) => {if (item) {const index = item.title.indexOf(searchValue);const beforeStr = item.title.substr(0, index);const afterStr = item.title.substr(index + searchValue.length);const title =index > -1 ? (<span>{beforeStr}<span className="site-tree-search-value">{searchValue}</span>{afterStr}</span>) : (<span>{item.title}</span>);if (item.children) {return { title, key: item.key, children: loop(item.children) };}return {title,key: item.key,};}return [];}) || []);};

 return (<TreeshowLineshowIcononExpand={onExpand}selectedKeys={selectedKeys}expandedKeys={expandedKeys}defaultExpandedKeys={expandedKeys}switcherIcon={<DownOutlined />}treeData={loop(selectData)}/>);

style

 .site-tree-search-value {color: red;}

Reac版本的Ant Design树形控件的使用、搜索关键字标红、只显示搜索匹配中的数据相关推荐

我的HEVC码流分析工具MFC小笔记：树形控件使用及窗口缩放
大约1个半月前,发布了自己写的HEVC码流分析工具.当时的版本显示语法元素使用是的Edit控件.很多主流分析工具都使用树形控件,看上去觉得比较高端,于是在纠结一天后下定决心自己也实现树形的HEVC语法 ...
Element ui tree树形控件获取当前节点id和父节点id
低版本Element ui tree树形控件获取当前节点id和父节点id的方法:点击查看最新版本Element ui tree树形控件获取当前节点id和父节点id教程: 1.找到node_modul ...
elementui tree获取父节点_vue_elementUI_ tree树形控件获取选中的父节点ID
一, vue_elementUI_ tree树形控件 1.1默认点击tree节点的第一个(注意不是checked选中) :expand-on-click-node="false" ...
025_Tree树形控件
1. Tree树形控件 1.1. Tree树形控件用清晰的层级结构展示信息, 可展开或折叠. 1.2. Tree树形控件内部使用了Node类型的对象来包装用户传入的数据, 用来保存目前节点的状态. 1 ...
duilib 自带树形控件的认识
CTreeViewUI 1.该控件继承自CListUI,所以是使用了对应的列表来模拟树形控件.该控件的容器填装的是CTreeNodeUI,而CTreeNodeUI也继承CListContainerEl ...
treeview控件怎么使用修改发育树_树形控件在生产力工具中的设计
惊!半年实践血泪史,3000 字深度好文,一个爱树的设计师手把手教你如何设计「树」! 树形控件是种常见的设计模式,几乎与图形化用户界面同时诞生,通过结构化的组织方式逐级展示内容,让整体信息架构一目了 ...
autojs遍历当前页面所有控件_树形控件在生产力工具中的设计
惊!半年实践血泪史,3000 字深度好文,一个爱树的设计师手把手教你如何设计「树」! 树形控件是种常见的设计模式,几乎与图形化用户界面同时诞生,通过结构化的组织方式逐级展示内容,让整体信息架构一目了 ...
前端VUE【实战】—— antd tree树形控件进行增删改查父子节点
个人博客:前端江太公前言 antd 对树形控件目录进行增删改查最近在用Ant Design写一个后台,遇到的需求就是实现一个可动态增减和编辑子节点的Tree. 实现的效果如下: 可以增加父子节点 ...
Angular_树形控件
Tree树形控件地址:https://ng.ant.design/version/0.7.x/components/tree/zh 何时使用# 文件夹.组织架构.生物分类.国家地区等等,世间万物的大 ...
树形控件CTreeCtrl的使用详解（一）
树型视的三个结构TVINSERTSTRUCT.TVITEM.NMTREEVIEW TVINSERTSTRUCT 包含添加新项到树形视控件所使用的信息.这个结构被TVM_INSERTITEM消息使用.这 ...

Reac版本的Ant Design树形控件的使用、搜索关键字标红、只显示搜索匹配中的数据

Reac版本的Ant Design树形控件的使用、搜索关键字标红、只显示搜索匹配中的数据相关推荐

最新文章

热门文章