(红框为机构,下面没圈的为部门)
需求是这样的, 后台返回的数据中,tree结构有的返回子节点数据了,有的没有返回子节点数据,(因为全部返回的数据量很大)没有返回子节点的需要在点击的时候 调取接口,在进行加载当前父节点下的子节点数据,但有子项的还要显示图标
所以,这个时候就可以使用load进行加载节点
这里只用关注 lazy :load=“loadNode” (两者搭配使用,否则没有效果) 具体可以看官方文档
html代码
<el-tree ref="tree" :data="data" lazy :load="loadNode" :highlight-current="true" :default-expanded-keys="idArr" :default-checked-keys="idArr" :props="defaultProps" @node-click="handleNodeClick" node-key="id">
<span class="custom-tree-node" slot-scope="{ node, data }">
<span>
<img v-show="data.type=='jg'" class="imgClass" src="@/assets/img/organ.png">
<img v-show="data.type=='bm'" class="imgClass" src="@/assets/img/organ-second.png">
{{node.label}}
</span>
</span>
</el-tree>
data 中 绑定一个isLeaf :leaf
defaultProps: {
children: 'items',
label: 'name',
isLeaf: 'leaf'
},
methods中的loadNode的方法
node.level === 0 的时候为我们初始化刚进来的时候, 直接去加载树列表即可 node.level === 1
等于1的时候就为我们的根节点了 unit.count 为后台返回的,判断当前节点下是否有子级
loadNode(node, resolve) {
const self = this;
if (node.level === 0) {
node.data.forEach(unit => {
if (unit.count === 0) {
// 叶子节点
unit.leaf = true;
} else {
unit.leaf = false;
}
});
return resolve(node.data || []);
}
if (node.data.count === 0) {
// 叶子节点
node.data.leaf = true;
} else {
node.data.leaf = false;
}
if (node.level === 1) {
(node.data.items || []).forEach(unit => {
if (unit.count === 0) {
// 叶子节点
unit.leaf = true;
} else {
unit.leaf = false;
}
});
return resolve(node.data.items || []);
}
if (node.data.type === 'bm') {
// 部门
(node.data.items || []).forEach(unit => {
if (unit.count === 0) {
// 叶子节点
unit.leaf = true;
} else {
unit.leaf = false;
}
});
return resolve(node.data.items || []);
} else if (node.data.type === 'jg') { //这个为机构的话,就可调取接口,机构后台返回的是子项全部数据
// 机构请求接口
systemApi
.getOrganizeTree({ flag: '1', type: 'jg', bmid: node.data.id })
.then(res => {
let treeData =
res &&
res.data &&
res.data.listtreenode &&
Array.isArray(res.data.listtreenode)
? res.data.listtreenode
: [];
treeData.forEach(unit => {
if (unit.count === 0) {
// 叶子节点
unit.leaf = true;
} else {
unit.leaf = false;
}
});
return resolve(treeData);
})
.catch(err => {
self.$message.error(err.msg || '获取数据失败');
return resolve([]);
});
}
},