element el-tree 的使用

本文介绍了在Vue.js项目中使用Element UI的el-tree组件进行懒加载的需求背景和实现方法。详细讨论了如何处理数据层递归加载,特别是针对大数据量时的优化策略,如维护已请求节点的本地数据。同时,文章提到了el-tree组件在懒加载过程中遇到的问题,如@node-change事件无法触发内置加载效果,并给出了注意事项和配合使用的属性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

el-tree的问题汇总


本文不概述懒加载的一些定义,只是提供一下懒加载如何使用,并且作者在项目中使用的情况以及使用时考虑到的问题。并且遇到的情况可能都不太相同,不过原理都是一样的

起因: 由于数据量较大,在进入界面的时候,会请求好一段时间,请求回来的数据,进行重新渲染的时候,也容易导致浏览器内存超出的情况,导致网页崩溃。

需求变更:数据层数总共四层,默认请求第二层数据,第一层数据是本地进行存储数据获得(这个可以和后端商量,是否需要前端来拿,最好还是让后端拼好数据直接返回即可),然后,第三层数据是由点击第二层的节点或者点击展开图标进行请求获得,第四层同上。
==注意:请求过的节点,下次不再进行请求,直接返回本地的数据,因此需要维护两个第二层和第三层点击节点之后的数组,buildingList,unitingList ==

懒加载

话不多少,直接上代码:

<
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值