项目树搜索筛选处理

最新推荐文章于 2024-10-27 00:31:45 发布

不吃鱼的猫miao~

最新推荐文章于 2024-10-27 00:31:45 发布

阅读量187

点赞数 1

文章标签： react native uni app

本文链接：https://blog.csdn.net/icon_sun/article/details/139863616

版权

全部筛选

父节点含有搜索内容，则需向下继续搜索，返回含有搜索内容的子节点

fuzzySearchTree = (tree, searchValue) => {
    const resTree = [];
    (tree || []).forEach(node => {
        if (node.name.indexOf(searchValue) > -1) { // 父节点 包含搜索字符串
            let arr = [];
            if (node.children && node.children.length > 0) {
                arr = this.fuzzySearchTree(node.children, searchValue); // 再递归查询子节点是否含有搜索字符串
            }
            resTree.push({...node, children: arr});
        } else { // 父节点 不包含搜索字符串；则还需向下检查子节点是否含有搜索字符串；
            if (node.children && node.children.length > 0) {
                const arr = this.fuzzySearchTree(node.children, searchValue);
                if (arr && arr.length > 0) {
                    resTree.push({...node, children: arr});
                }
            }
        }
    });
    return resTree;
  }

筛选到就停止

父节点含有搜索内容，无需向下继续搜索，直接返回改节点及下面所有子节点

fuzzySearchTree = (tree, searchValue) => {
   const resTree = [];
    (tree || []).forEach(node => {
        if (node.name.indexOf(searchValue) > -1) { // 父节点 包含搜索字符串，直接将父节点及以下的子节点都返回
            resTree.push({...node});
        } else { // 父节点 不包含搜索字符串；则还需向下检查子节点是否含有搜索字符串；
            if (node.children && node.children.length > 0) {
                const arr = this.fuzzySearchTree(node.children, searchValue);
                if (arr && arr.length > 0) {
                    resTree.push({...node, children: arr});
                }
            }
        }
    });
    return resTree;
}

效果图
在这里插入图片描述

项目树和搜索页面代码如下

<u-popup :show="show" mode="left" overlayStyle="height:100%," @close="show = false">
	<view>
		<view class="pop-title">监督检查</view>
		<view class="popSearch">
			<u-search placeholder="输入关键词进行搜索" v-model="popSearch" shape="round" @search="popSearchs()" :showAction="false"
			bgColor="#E7ECF4" height="30" ></u-search>
		</view>
		<scroll-view :scroll-y="true" class="listWarp">
			<treeItem :list="projectTree" @change="change" :selectValue='projectID'></treeItem>
		</scroll-view>
	</view>
</u-popup>

popSearchs(){			
	const arr = this.fuzzySearchTree(this.projectTreeCopy,this.popSearch)
	this.projectTree = arr
},