el-tree loadNode懒加载的实现
作者：不能懒鸭
本文主要介绍了el-tree loadNode懒加载的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
需要 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懒加载内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！