vue 递归查询树

1668764060964.png

<div class="MainsLeftBtn">
            <el-input v-model="companyCodeCn" size="mini" placeholder="请输入" class="input-with-select">
              <el-button slot="append" icon="el-icon-search" @click="filterSearch()"></el-button></el-input>
          </div>
          <div class="ei-tree tree">
            <!-- node-key="COMPANY_CODE"  -->
            <el-tree 
              v-if="data && data.itemCode&&!loading" 
              ref="tree" 
              :data="list" 
              :filter-node-method="filterNode"
              :props="props"
              node-key="NODE_ID"
              :show-checkbox="!radio" 
              @check-change="checkChange" 
              highlight-current 
              :check-strictly="checkStrictly"
              @node-click="nodeClick"
              @node-expand="nodeExpand">
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <span :class="node.text">{{data.COMPANY_CODE}}-{{ node.label }}</span>
              </span>
            </el-tree>
          </div>

this.listInitData 数据源 this.list 树渲染的数据

//递归搜索
    filterSearch(){
        this.isfilterSearch = true;
        //利用foreach循环遍历
        this.$refs.tree.setCheckedKeys([]);
        function find(arr,value,data){
          arr = arr.filter((item)=>{
            data.push(item);
            if(item.children&&item.children.length>0){
              
              item.children = find(item.children,value,data);
            }
            if((item.COMPANY_CODE+item.COMPANY_CODE_CN).indexOf(value.toUpperCase())> -1){
              item.isQuery = true;
              data = data.map((e)=>{
                e.isQuery = true;
                return e;
              })
            }
            if(item.isQuery){
              return item;
            }
          })
          return arr;
        }
        this.list = find(JSON.parse(JSON.stringify(this.listInitData)),this.companyCodeCn,[]);
    },