实现类似elementui中的树节点过滤效果

发布时间 2023-09-12 16:27:14作者: cmwang2017
filterTree(tree, arr=[]){   
      let that = this
      if (!tree.length) return [];
      for (let item of tree) {
        let node = {}
        if(item.name.indexOf(this.searchVal) > -1){
          const itemValue =  {...item};
          node = {
            name: itemValue.name || '',
            id: itemValue.id || '',
            count: itemValue.count || 0,
            parentId: item.parentId,
            isOpend: true,    
            children: []
          }
          arr.push(node)
        }
         
        // 如果有子节点,调用递归函数,并把空数组传给下一个函数
        // 利用引用数据类型的特性,实现浅拷贝
        // 递归函数过滤时会改变这个空数组数据,从而实现层级结构过滤
        if (item.children && item.children.length) {
            this.filterTree(item.children, node.children);
        };
        // 当节点的子节点的数据不存在, 可以把它的children删除
        node?.children?.length === 0 && delete node?.children;
      };
      return arr;
    },