在日常项目中,常常会遇到对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的自定义内容+搜索值为高亮问题》