项目树 搜索筛选处理

全部筛选

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

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
},
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值