vue3.x搭配el-tree搜索问题（包含el-tree内置搜索、接口搜索以及把搜索到的值进行高亮）

在日常项目中，常常会遇到对el-tree进行关键字搜索的问题，我们先看一下el-tree提供的内置搜索：适用于我们已经把数据全部获取到的场景。

调用 Tree 实例的filter方法，参数为关键字。需要注意的是，此时需要设置filter-node-method，值为过滤函数。 

我们看一下接口搜索：因为el-tree懒加载不适用于接口搜索的场景，所以我的思想是可以在搜索时候把el-tree的懒加载去掉，给el-tree的data属性赋值即可。

<el-tree
class="filter-tree"
v-if="openTree==1"
:data="treeValData"
:props="defaultProps"
:expand-on-click-node="false"
:default-expand-all="expandAll"
 ref="quickTree"
:load="loadNode"
:lazy="lazyFlag"
 >



     const qutextchange = (data:string) =>{
      //关闭tree
      openTree.value = 2;
      if(input.value!=""){
        treeValData.value = [];
        networkSearch()
      }else{
          //全部清空  重载load方法
          openTree.value = 1;
          treeValData.value = [];
          loadNode( nodeObj.value,resolveFun.value);
          lazyFlag.value = true;
          expandAll.value=false;
      }
    ）
    
    const networkSearch = ()=>{
        //接口ajax
        openTree.value = 1;
        lazyFlag.value = false;
        treeValData.value =  走接口获取的数据 
        expandAll.value=true;
    }

我先定义了el-tree的v-if去进行树结构的重绘， 在刚搜索的时候关闭树，走接口获取数据，关闭懒加载，给data赋值，这样等tree重绘完了之后就没有懒加载功能。等搜索值为空的时候再重绘一边树并且打开懒加载功能，调取loadNode函数，这里要注意loadNode函数所带的参数是我在一开始就存起来的，第一个是第一级的node，第二个是懒加载加载数据函数，是为了能正常调取loadNode方法。

关于搜索到的tree高亮的问题，这其中涉及到了el-tree的自定义内容，请看我下一篇：《vue3.x搭配el-tree的自定义内容+搜索值为高亮问题》