懒加载前端代码
html部分
<template>
<div class="box">
<div class="leftBox">
<el-tree lazy :load="loadNode" :props="props" node-key="id">
</el-tree>
</div>
</div>
</template>
js部分
<script>
export default {
data() {
return {
props: {
label: "name",
isLeaf: "isLeaf",
},
};
},
methods: {
loadNode(node, resolve) {
//如果展开第一级节点,从后台加载一级节点列表
if (node.level == 0) {
this.loadfirstnode(resolve);
}
//如果展开其他级节点,动态从后台加载下一级节点列表
if (node.level >= 1) {
this.loadchildnode(node, resolve);
}
},
//加载第一级节点
async loadfirstnode(resolve) {
let params = {
level: 0,
};
const res = await this.$api.getTreeData(params);
return resolve(res.data);
},
//加载节点的子节点集合
async loadchildnode(node, resolve) {
// console.log("超过二级的", node, node.level);
let params = {
id: node.key,
};
const res = await this.$api.getTreeChildData(params);
return resolve(res.data);
},
},
};
</script>