一、效果展示
二、视图
<el-tree
accordion
lazy
:load="loadNode"
:props="props"
@node-click="handleNodeClick"
>
</el-tree>
三、data定义
props: {
label: "nodeCname",
children: "zones",
},
四、script方法
//懒加载
loadNode(node, resolve) {
// 加载 树数据
let that = this;
if (node.level === 0) {
setTimeout(() => {
that.loadtreeData(resolve);
}, 500);
}
if (node.level >= 1) {
console.log("node.data.nodeId,", node.data.nodeId);
setTimeout(() => {
this.getChildByList(node.data.nodeId, resolve);
return resolve([]); // 加上这个,防止在该节点没有子节点时一直转圈的问题发生。
}, 500);
}
if (node.level > 3) return resolve([]);
},
// 获取一级目录
loadtreeData(resolve) {
selectTreeList()
.then((response) => response.data)
.then((result) => {
if (result.length !== 0) {
let tabTitleList = result;
tabTitleList.forEach((item) => {
item.nodeCname = item.nodeCname;
});
resolve(tabTitleList);
} else {
return false;
}
})
.catch((err) => {});
},
// 获取子节点请求
getChildByList(_parentID, resolve) {
selectNodeChildren({ nodeId: _parentID })
.then((response) => response.data)
.then((result) => {
if (result.length !== 0) {
let tabSecondList = result;
tabSecondList.forEach((item) => {});
resolve(tabSecondList);
} else {
return false;
}
})
.catch((err) => {});
}