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

Peng~

已于 2022-10-17 16:19:16 修改

阅读量4.8k

点赞数 6

分类专栏：工作遇到的问题文章标签： javascript 算法数据结构

于 2022-01-06 15:36:33 首次发布

本文链接：https://blog.csdn.net/qq_43522419/article/details/122344642

版权

工作遇到的问题专栏收录该内容

1 篇文章 0 订阅

订阅专栏

该博客介绍了树结构数据的过滤方法，分为带父节点和不带父节点两种情况。在带父节点的过滤中，当节点自身或子孙节点匹配过滤条件时保留；而不带父节点的情况仅考虑节点自身是否匹配。示例代码展示了如何实现这个过滤过程。

摘要由CSDN通过智能技术生成

树结构的过滤分两种情况

带父节点
不带父节点

如：
原始树结构

带父节点
在这里插入图片描述

不带父节点
在这里插入图片描述

 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 : [];
        }