样式1:
首先加载第一层树节点(要有加载第一层节点的接口才ok)
样式2:
当点击第一层节点,或者其他层父节点的时候,加载其子节点,形成一个懒加载的效果。
代码实现:
重要的是在tree中设置
:load=“loadNode”
lazy
<el-tree
:data="treeData"
node-key="id"
:filter-node-method="filterNode"
ref="indexTree"
:props="treeDataDefaultProp"
:expand-on-click-node="false"
class="tree_Style"
:load="loadNode"
lazy
>
</el-tree>
created() {
this.init();
},
methods: {
// 初始化第一层树
init() {
this.getTreeData();
},
// 得到第一层树的列表
async getTreeData() {
const param = {
type: Number(this.cateTabActive),
keyword: this.keyword
};
const res = await this.$api.get('/api/category', param);
if (res.code == 200) {
// treeData 就是树绑定的数据
this.treeData = res.info;
} else {
return false;
}
},
// 树的懒加载
loadNode(node, reslove) {
let that = this;
if (node.level === 0) {
reslove(that.treeData);
}
if (node.level >= 1) {
this.loadNodeChildren(node, reslove);
}
},
// 树的懒加载获取子节点
async loadNodeChildren(node, reslove) {
let param = {
categoryId: node.data.id,
type: Number(this.cateTabActive)
};
const res = await this.$api.get('/api/category', param);
let resArr = [];
if (res.code === 200) {
res.info.forEach(item => {
item = JSON.parse(JSON.stringify(item));
resArr.push({
name: item.name,
id: item.id,
leaf: item.leaf,
parentCategoryId: item.parentCategoryId,
currentLevel: item.currentLevel,
relateCount: item.relateCount
});
});
// 将得到的孩子列表,塞进树中
this.$refs.indexTree.updateKeyChildren(node.data.id, resArr);
return reslove(res.info);
}
},