最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
el-tree loadNode懒加载代码实现方法
时间:2022-08-18 编辑:袖梨 来源:一聚教程网
本篇文章小编给大家分享一下el-tree loadNode懒加载代码实现方法,文章代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看。
需要 lazy、 load 两个属性一起用
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) } },
相关文章
- SpringBoot测试配置属性与web启动环境解析 10-24
- SpringBoot常用计量与bean属性校验和进制数据转换规则解析 10-24
- 工厂方法在Spring框架中的运用介绍 10-24
- SpringBoot热部署设置详解 10-24
- JavaScript二叉搜索树构建操作解析 10-12
- JavaScript二叉树及各种遍历算法讲解 10-12