js element-ui el-tree 树结构过滤筛选_el-tree树结构筛选组装新的树结构-优快云博客

该文章详细介绍了如何使用JavaScript编写一个名为`filterTree`的函数，用于在树结构数据中进行过滤操作。函数根据节点的`compid`和`compname`属性是否包含查询关键字来决定节点是否保留。讨论了两种情况：一是当需要保留包含符合条件子孙节点的父节点时，二是仅保留自身符合条件的节点，并提供了具体的代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

树结构的过滤分两种情况

带父节点
不带父节点

具体代码如下：

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

          // 结束递归的条件
          if (!(nodes && nodes.length)) {
            return [];
          }
          let newChildren = [];
          for (let node of nodes) {
            //一、带父节点     以下两个条件任何一个成立，当前节点都应该加入到新子节点集中
            // 1. 子孙节点中存在符合条件的，即 subs 数组中有值
            // 2. 自己本身符合条件
            // let subs = this.filterTree(node.children, query);
            // if (predicate(node)) {
            //   newChildren.push(node);
            // } else if (subs && subs.length) {
            //   node.children = subs;
            //   newChildren.push(node);
            // }

            //二、不带父节点     以下只需要考虑自身的节点满足条件即可,不用带上父节点
            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 : [];
        }

原创：js element-ui el-tree 树结构过滤筛选_filtertree_Peng~的博客-优快云博客