话不多说,直接上干货。原创禁止转载~ 谢谢
模板部分
<template>
<el-tree
v-loading="loading"
class="filter-tree"
:data="treeData"
:props="lazyProps"
:load="loadNode"
ref="tree"
lazy
></el-tree>
</template>
js代码块
如果要实现tree组件以及懒加载功能,有必要了解一下其需要哪些属性及方法。
lazyProps: 属性配置对象,如:
children
: 子节点, 类型Array;
label
:显示的标签名;
isLeaf
: 是否提前告知tree组件有子节点。
export default {
data() {
return {
treeData: [],
lazyProps: { // 映射关系
children: 'childrens',
label: 'orgName',
isLeaf: 'leaf'
},
loading: false
};
},
methods: {
loadNode(node, resolve) {
//如果展开第一级节点,从后台加载一级节点子列表
if (node.level == 0) {
this.getTreeData('', resolve); // 这里返回的格式为 [{...}]
}
//如果展开其他级节点,动态从后台加载其下一级节点列表
if (node.level > 0) {
setTimeout(() => {
this.getTreeData(node.data.id, resolve); // 这里返回的是子节点childens集合
}, 200);
}
},
/**
* 这里通过id动态传入的方式获取treeData:
* 当id为空时,加载一级节点。就是总数据集合。
* 当id不为空时,则动态加载当前节点的子节点集合
*/
getTreeData(id, resolve) {
this.loading = true;
this.$axios
.get(`/test/workWeixin/queryChildrens?id=${id}`)
.then(res => {
// id有值表示查找当前子节点集合,无值表示查找所有数据。 arr必须是数组(组件要求的格式)
// 这里的childrens 则与lazyProps中的childrens相对应,为子节点集合
let arr = !!id ? res.data.childrens : [res.data];
arr.forEach(el => {
// 通过hasNaxt字段判断是否有子集,告知tree组件是否需要渲染展开箭头,这里的leaf则与lazyProps中的leaf相对应
el.leaf = el.hasNaxt ? false : true;
});
this.loading = false;
resolve(arr);
});
},
}
}
结语:
如果对你有帮助的话,记得点个赞呀~ 十分感谢😊