el-tree loadNode懒加载如何实现
这篇文章主要介绍了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懒加载如何实现”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注蜗牛博客行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:niceseo99@gmail.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。版权声明:如无特殊标注,文章均为本站原创,转载时请以链接形式注明文章出处。
评论