需要 lazy、 load 两个属性一起用
<el-tree :data="treeData" :props="defaultProps" :load="loadNode" @node-click="handleNodeClick" lazy> </el-tree>
data() {
return {
treeDataList: [],
defaultProps: {
id: 'id',
label: 'name',
children: 'children',
parentId:'parentId',
isLeaf: false,// 指定节点 是否为叶子节点，仅在指定了 lazy 属性的情况下生效
},
}
},loadNode(node, resolve) {
let that = this;
if (node.level === 0) {
that.getFatherData(resolve);//获取顶级节点数据
}
if (node.level >= 1) {
this.getChildrenData(node.data.id, resolve);//异步获取子节点数据
return resolve([]); // 防止在该节点没有子节点时一直转圈
}
},
获取顶级节点数据：
getFatherData(resolve) {
let options = {
url: '',
data: {
parentId: 0
}
}
let res = await $.fn.commonPlugin.commonAjaxRequest(options)
if(res.flag){
let data = res.data;
data.forEach(item => {
item={...item,isLeaf:true}
});
resolve(data)
}
},
获取子节点数据：
getChildrenData(parentId, resolve) {
let options = {
url: '',
data: {
parentId
}
}
let res = await $.fn.commonPlugin.commonAjaxRequest(options)
if(res.flag){
let data = res.data;
data.forEach(item => {
item={...item,isLeaf:false}
});
resolve(data)
}
},到此这篇关于el-tree loadNode懒加载的实现的文章就介绍到这了,更多相关el-tree loadNode懒加载内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax！