Tree数据的搜索功能 includes + 递归

树形数据的搜索功能

在工作中为了优化项目性能，前端来实现简单树形数据的搜索功能

需求内容

父节点含有，将父节点返回（包含所有子节点）

父节点没有，但子节点含有，父节点仍要返回，而子节点只返回包含的搜索内容的

最终效果

实现过程

先看数据结构

方法如下

 onRecursion(list, str) {
        let onRecursionData = (arr, val) => {
               let newarr = []
               arr.forEach(item => {
                   if (item.children && item.children.length) {
                       let children = onRecursionData(item.children, val)
                        let obj = {
                            ...item,
                            children
                       }
                       if (children && children.length) {
                           newarr.push(obj)
                        }
                   } else {
                       if (item.name.includes(val)) {
                           newarr.push(item)
                       }
                   }
               })
               return newarr
        }
      return onRecursionData(list, str)
 }

input 输入事件

      iptChange(e) {
           let trim=e.replace(/^\s*|\s*$/g, "");
           if (trim) {
              this.schoolList = this.onRecursion(this.cloneArr, trim);  //(整体tree数据，string)
           } else {
               this.schoolList = this.cloneArr;
           }
       },

亲测可用 有问题滴滴🙂