过滤和筛选树形结构数据

场景

在平时项目开发中经常会遇到树形数据的处理，如树形数据根据条件值过滤掉不符合条件的选项，如果是最后的子数据符合条件那么就会保存这条树形链路的所有直属数据并过滤掉所有非直属的数据。如果是符合条件的数据还有子元素，那么就保留所有的后代数据。

代码示例

    // 树形源数据
    const treeList = [
      {
        key: '0',
        title: '全局变量',
        children: [
          {
            title: '全局变量1',
            key: '1',
          },
          {
            title: '全局变量2',
            key: '2',
          },
        ],
      },
      {
        key: '3',
        title: '全局变量3',
        children: [
          {
            title: '全局变量3-1',
            key: '4',
          },
          {
            title: '全局变量3-2',
            key: '5',
          },
        ],
      }
    ];
    
    // 定义过滤的函数（trees 为需要过滤的数值， filterValue 为过滤的条件值）
    const filterTree = (trees: any[], filterValue: string) => {
      function loopFilter(item) {
        // 如果当前项满足条件就直接通过此项数据校验
        if (item.title === filterValue) return true;
        // 否则就需要去递归判断他的子数据中是否有符合条件值
        if (item.children) {
          let children = item.children.filter((child) =>
            loopFilter(child),
          );
          if (children.length > 0) {
            // 将不符合条件的子数据移除
            item.children = children;
            return true;
          }
        }
        return false;
      };
    
      return trees.filter(item => loopFilter(item));
    };

使用示例

  console.log(filterTree(treeList, '全局变量3-1'));
  console.log(filterTree(treeList, '全局变量'));

打印验证