js element-ui el-tree 树结构过滤筛选

最新推荐文章于 2025-05-19 11:09:30 发布

丢了猫的鱼

最新推荐文章于 2025-05-19 11:09:30 发布

阅读量1.4k

点赞数

文章标签： javascript vue.js elementui

本文链接：https://blog.youkuaiyun.com/jiaxiaohong_csdn/article/details/129003306

版权

树结构的过滤分两种情况

带父节点
不带父节点

具体代码如下：

 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~的博客-优快云博客