您现在的位置是：网站首页> 编程资料编程资料
el-tree loadNode懒加载的实现_vue.js_
2023-05-24
231人已围观
简介 el-tree loadNode懒加载的实现_vue.js_
需要 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) } },到此这篇关于el-tree loadNode懒加载的实现的文章就介绍到这了,更多相关el-tree loadNode懒加载内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！
您可能感兴趣的文章:
相关内容
- JavaScript本地存储与会话存储的实现介绍_javascript技巧_
- npm install -g @vue/cli常见问题解决汇总_node.js_
- Angular 结合 dygraphs 实现 annotation功能_AngularJS_
- 解决element ui cascader 动态加载回显问题_vue.js_
- element el-tree折叠收缩的实现示例_vue.js_
- JavaScript Map 和 Object 的区别解析_javascript技巧_
- 浅谈React useDebounce 防抖原理_React_
- el-tree的实现叶子节点单选的示例代码_vue.js_
- vue el-select与el-tree实现支持可搜索树型_vue.js_
- Vue 和 Django 实现 Token 身份验证的流程_vue.js_
