实现关键点:
this.$refs.tree.$data.store.lazy 控制lazy属性是否是生效的,取值为Boolean;
node-key="id" 用于展开搜索出的节点
default-expanded-keys="expandArr" 默认展开节点的数组
代码:
HTML
<el-tree
ref="tree"
:data="treeData"
:load="loadNode"
:props="defaultProps"
lazy
node-key="id"
:default-expanded-keys="expandArr"
@node-click="handleNodeClick"
></el-tree>
异步加载树节点代码
// 懒加载节点
loadNode(node, resolve) {
// 一级节点处理
if (node.level == 0) {
this.getTreeData(resolve, "", true);
this.resolve = resolve;
}
// 其余节点处理
if (node.level >= 1) {
this.getTreeData(resolve, node.data.code, false);
}
},
input框搜索事件
searchActionTree() {
if (!this.searchData.orgName) {
console.log("searchActionTree");
this.treeData = [];
this.expandArr = [];
}
this.getTreeData(this.resolve, "", false);
},
获取数据
async getTreeData(resolve, parentCode, lazeFlag) {
if (!lazeFlag) {
this.$refs.tree.$data.store.lazy = !this.searchData.orgName;
}
let { code, data, message } = await this.$http.marketing_mdmOrgLazyTree({
parentCode,
name: this.searchData.orgName,
});
if (code) {
data.forEach(element => {
element.leaf = false;
});
this.expandArr = [];
if (!this.searchData.orgName) {
resolve(data);
} else {
this.treeData = [];
this.treeData = JSON.parse(JSON.stringify(data));
this.pushID(data);
}
} else {
this.$message.error(message);
}
},
// 递归遍历获取要展开的节点数组
pushID(Array) {
Array.forEach(item => {
this.expandArr.push(item.id);
if (item.children && item.children.length > 0) {
console.log(item);
this.pushID(item.children);
}
});
},
注意点:
在搜索el-tree时,如果搜索条件为空,那么需要清除el-tree绑定的data数据,并且将默认展开节点置为空数组;
在获取的数据的方法中首先要根据条件控制el-tree是否要进行懒加载,一般搜索时结合了默认展开节点,所以必须设置非懒加载,否则展开的节点都将调用一次获取数据的方法,导致请求数量庞大,影响用户体验,并且有极大的资源浪费
在获取数据的方法中,根据是否是进行搜索判断获取到的数据是resolve出去还是赋值给el-tree的data变量。