奉劝不要在ElementPlus中使用el-table渲染大量树形结构数据

博客讲述了在ElementPlus中使用el-table渲染大量树形结构数据导致页面崩溃的问题,即便不包含选择器,超过3000节点也会性能下降。作者尝试理解虚拟表格文档未果,最终采用Vxe-table作为替代方案,解决了性能问题,实现了3w左右节点的树形结构秒出,支持虚拟滚动,并简化了数据结构转换过程。
摘要由CSDN通过智能技术生成

奉劝不要在ElementPlus中使用el-table渲染大量树形结构数据(el-tree不知道会不会也存在这个问题)

记录一个悲催的建树历程:
链接:这是我多日前在CSDN上的一个提问
在这里插入图片描述

提问内容是,ElementPlus的el-table渲染一颗表格树形结构,在其中嵌入选择器,在大量树形节点的情况下会导致页面崩溃。
但是真正让我崩溃的是,即使我不嵌入选择器,单输出节点名称,在拥有1w - 3w左右节点的树形结构中,页面照样崩溃掉(似乎只要达到3000节点以上,性能都很差)在这里插入图片描述
后面想着研究下官方文档提供的虚拟表格怎么用,我这卑微前端实习生表示,那个文档写的都是啥。。。

想破头也没想出办法,最后求助领导,领导说这个无解。后面实在不行,项目里面就不再使用el-table去渲染树形结构,统一换成了Vxe- table ,这拓展组件真的救了我一命,3w左右节点的树形结构秒出,而且支持虚拟滚动,并且作者估计借鉴了Element,设计方面和Element极其相似。用起来真的毫不费劲,看官方文档好像还是国人开发的。还有一点是,Element-Plus的树形结构还需要前端自己去将平铺的数组转化成对象里带children的数组嵌套数组的结构,但Vxe- table仅需要将平铺的数组(树形节点)直接丢进去就行了,拓展组件自动帮你建树,太人性化了吧呜呜呜呜。

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值