vue element 使用js筛选tree这种结构的数据

vue element 使用js筛选tree这种结构的数据,第1张

一,筛选连带父级

nodes为传入数据

query为检索键字er

filterTree(nodes, query) {
 	// 条件就是节点的title过滤关键字
 	let predicate = function(node) {
 		if (node.name.includes(query) || node.name.includes(query)) {
 			return true;
 		} else {
 			return false;
 		}
 	};
 	// 结束递归的条件
 	if (!(nodes && nodes.length)) {
 		return [];
 	}
 	let newChildren = [];
 	for (let node of nodes) {
 		let subs = this.filterTree(node.children, query);
 		if (predicate(node)) {
 		  newChildren.push(node);
 		} else if (subs && subs.length) {
 		  node.children = subs;
 		  newChildren.push(node);
 		}
 	}
 	return newChildren.length ? newChildren : [];
 }

二,不带父级

 filterTree(nodes, query) {
          // 条件就是节点的title过滤关键字
          let predicate = function (node) {
            if (node.name.includes(query) || node.name.includes(query)) {
              return true;
            } else {
              return false;
            }
          };

          // 结束递归的条件
          if (!(nodes && nodes.length)) {
            return [];
          }
          let newChildren = [];
          for (let node of nodes) {

            //不带父节点   
            if (predicate(node)) {
              newChildren.push(node);
              node.children = this.filterTree(node.children, query);
            } else {
              newChildren.push(...this.filterTree(node.children, query));
            }
          }
          return newChildren.length ? newChildren : [];
        }

改方法可以用做筛选树,树表等场景使用!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1320377.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-06-11
下一篇 2022-06-11

发表评论

登录后才能评论

评论列表(0条)

保存