首页 > 其他 > 详细

关于Element-UI的穿梭框数据量大时,点击‘全选’卡顿的解决方案

时间:2020-08-10 17:09:43      阅读:879      评论:0      收藏:0      [点我收藏+]
EUI中的穿梭框数据量大的方案
如果你是点击一个item就切换到另一个穿梭框的方式的话,完全不虚数据量大,分页就能解决。
 
问题背景
当你的数据展示是用el的checkBox-group的方式,数据量上万条,点击全选按钮时,造成6秒以上卡顿。

分析
checkBox-group有个check数组,如果`check数组`中有`用来渲染的checkBox-item数组`的一项,那么该项就会被标记为已选,否则是未选。实现原理就是单纯的check数组和checkBox-item数组进行比较。
当用户点击全选的时候,check数组变成上万条数据的数组,此时我们渲染了100条数据,那么就要进行10000x100级别的循环,这就是耗时的原因所在。
其实,页面只渲染了100条数据,我们没必要将上万条数据一次性放入check数组中,我们只需要把这100条数组放入check数组,显示这100条数据为已选即可。当页面渲染了更多数据的同时,将新增的数据添加进check数组即可。这样性能大大提升。
 
方案
我采用的方案如下:
1. 只显示100条数据。
2. 下拉显示下100条数据,上拉显示上100条数据。
3. 当下拉或者上拉增加渲染数据的同时,把新增数据添加进check数组。

这些只是大致思路,我已经实现了。还有很多细节要处理,想要完善,还得利用对象的键值对实现删除等。

关于Element-UI的穿梭框数据量大时,点击‘全选’卡顿的解决方案

原文:https://www.cnblogs.com/raintoway/p/13469997.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!