在使用el-tree的懒加载时 我需要每一个层 调用一个接口 共三个层级
调用懒加载时 必须要有这几个属性
:props=“props” ----> 其中的isLeaf 来判断是不是最后那个叶子节点
:load=“loadNode” ---->加载子树数据的方法,仅当 lazy 属性为true 时生效
lazy ----> 是否懒加载子节点,需与 load 方法结合使用
isLeaf
可以提前告知 Tree 某个节点是否为叶子节点,从而避免在叶子节点前渲染下拉按钮。
HTML部分
<el-tree
class="filter-tree"
ref="tree"
accordion
:data="leftData"
@node-click="handleNodeClick"
node-key="listId"
:current-node-key="currentNodeKey"
:highlight-current="true"
:props="defaultProps"
:default-expanded-keys="idArr"
lazy
:load="loadNode"
>
<span class="custom-tree-node" slot-scope="{ node, data }">
<el-tooltip
class="item"
effect="dark"
:content="node.label"
placement="top-start"
>
<span :id="data.listId">{{ node.label }}</span>
</el-tooltip>
</span>
</el-tree>
JS部分
import {
getMenuList,
getNodeMenuList,
getDataList,
} from "@/api/index";
export default {
data() {
return {
defaultProps: {
children: "children",
label: "name",
isLeaf: "isLeaf",
},
currentNodeKey: "",
leftData:[],
}
},
methods:{
// 懒加载获取数据
loadNode(node, resolve) {
if (node.level === 0) {// 第一层数据
getMenuList({}).then((res) => {
//左面导航栏省份信息
if (res.data.resp_code == "200") {
let data = res.data.datas;
for (let key in data) {
this.leftData.push({
name: key,
listId: key,
});
}
}
});
return resolve(this.leftData);
}
if (node.level === 1) {// 第二层数据
let provinceName = {
provinceName: node.label, //上海
};
let twoList = [];
getNodeMenuList(provinceName).then((res) => {
res.data.datas.forEach((items) => {
twoList.push({
listId: items.listID,
name: items.nodeName,
provinceName: items.provinceName,
children: [],
});
twoList.isLeaf = true;
});
});
setTimeout(() => {
resolve(twoList);
}, 1000);
}
if (node.level == 2) {//第三层数据
let obj = {
nodeName: node.data.name,
provinceName: node.data.provinceName,
};
let children = [];
getDataList(obj).then((res) => {
if (res.data.resp_code == "200") {
res.data.datas.forEach((item, index) => {
node.data.children.push({
description: item.description,
links: item.links,
listId: item.listId,
name: item.name,
provinceName: item.provinceName,
isLeaf: true,// 判断是不是子节点(最后一层数据 是否显示下拉图标) 如果不显示下拉图标为true 如果显示就可以不写
});
});
}
});
resolve(node.data.children);
}
if (node.level > 2) {
resolve([]);
}
},
}
}