<el-tree
ref="tree"
:data="data"
:props="defaultProps"
:load="loadNode"
show-checkbox
class="the-tree"
@node-click="nodeClick"
node-key="nodekey"
lazy
icon-class='icon-tree'
:expand-on-click-node='false'
@check='handleCheck'
>
</el-tree>
async loadNode(node, resolve) {
this.node = node;
this.resolve = resolve;
debugger;
if (node&&node.level == 0) {
// 获取第一层
let distRoot;
let res = await getDepTree();
if (
res.data &&
res.data.resultInfo &&
res.data.resultInfo.success &&
res.data.resultInfo.data
) {
let re = res.data;
let result = this.transform(re);
if (!result || !result.pkid) {
return;
}
distRoot = {
...result,
name: result.deptname,
label: result.deptname,
nodekey: result.pkid,
tid: result.pkid,
disabled: true
};
EventBus.$emit("queryDepartmentUser", distRoot);
}
//默认展开第一层根节点-----------这个地方是让节点渲染完成后,加载第二层节点的核心代码
this.$nextTick(() => {
let nodedata = node.childNodes[0];
nodedata.expanded = true;
nodedata.loadData();
});
return resolve([distRoot]);
} else {
if(node.level==1){
// 获取第二层数据部门
let resultC = await getDepChildTree(node.data.pkid);
let secondLevel = [];
if(resultC.data &&resultC.data.resultInfo &&resultC.data.resultInfo.success){
secondLevel = resultC.data.resultInfo.data.items;
secondLevel.map(item=>{
item.disabled = true
item.label = item.deptname ? item.deptname : item.systemname;
item.nodekey = item.pkid;
})
}
this.renderTree(secondLevel);
this.$emit("closeReload");
resolve(secondLevel);
}else{
// 获取第三层系统列表
let systemRes = await getDeptSystem(node.data.pkid);
let thirdLevel=[]
if(systemRes&&systemRes.data&&systemRes.data.data&&systemRes.data.data.length > 0){
thirdLevel = systemRes.data.data;
thirdLevel.map(item=>{
item.label = item.deptname ? item.deptname : item.systemname;
item.nodekey = item.pkid;
})
}
resolve(thirdLevel)
node.childNodes.map(i=>i.isLeaf=true)
}
}
},
最终的效果,懒加载完成后显示了第二层节点: