AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

el-transfer 数据量过大加载慢卡顿解决办法：el-transfer虚拟滚动懒加载的实现

2023-11-01 737
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： el-transfer 数据量过大加载慢卡顿解决办法：el-transfer虚拟滚动懒加载的实现

参考链接

1）https://github.com/GreenHandLittleWhite/blog/issues/15

2）https://github.com/GreenHandLittleWhite/blog/tree/master/el-virtual-transfer

3）https://github.com/raintoway/element/tree/sum

其他可参考项

1）Element-UI的transfer穿梭框组件数据量大解决方案

2）https://github.com/ElemeFE/element/pull/20282

3）https://github.com/ElemeFE/element/issues/2028

4）vue-element-bigdata-table

注：此参考方案亲测为前端优化，同时也要解决数据源数据的获取问题

后端上：根据Key的查找Dictionary、HashTable的效率是高于 List 的， 但是遍历的话则List效率更好。

以上就是el-transfer 数据量过大加载慢卡顿解决办法：el-transfer虚拟滚动懒加载的实现的介绍，做此记录，如有帮助，欢迎点赞关注收藏！

文章标签：
前端开发
GoodTime
目录
相关文章
兜里只有三分钱~
element el-cascader动态编辑赋值后，不回显的解决方法（整理）
element el-cascader动态编辑赋值后，不回显的解决方法（整理）
兜里只有三分钱~
1429 0
timfan
|
API
Element UI Loading 加载组件动态变更 text 值（加载文案）
有这样的一个需求，我在上传文件的时候，上传阶段耗时较长，所以利用加载动画作为友好提示用户等待。
timfan
1464 0
Element UI Loading 加载组件动态变更 text 值（加载文案）
微芒不朽
element-ui table排序sortable三种状态，怎么去掉默认状态
在 element-ui 中，也定义了 sort-orders 有三种状态： ascending、descending、null，这三种状态形成一个循环切换。
微芒不朽
2901 0
热爱技术的小郑
|
7月前
|
JavaScript
成功解决：el-dialog弹出窗口、数据第一次没有加载、第二次打开才能加载数据。（每次页面刷新后、第一次打开dialog窗口、图片数不加载）
这篇文章分享了解决Vue中`el-dialog`弹出窗口在第一次打开时数据未加载问题的技巧，通过改变组件的`key`属性来强制Vue重新渲染DOM，从而确保数据正确加载。
热爱技术的小郑
2227 0
成功解决：el-dialog弹出窗口、数据第一次没有加载、第二次打开才能加载数据。（每次页面刷新后、第一次打开dialog窗口、图片数不加载）
朝阳39
|
8月前
|
缓存 JavaScript
vue 页面缓存 keep-alive（含配置清除页面缓存 exclude，局部缓存，动态缓存，路由控制缓存 $route.meta.keepAlive）
vue 页面缓存 keep-alive（含配置清除页面缓存 exclude，局部缓存，动态缓存，路由控制缓存 $route.meta.keepAlive）
朝阳39
776 0
G佳伟
|
9月前
|
缓存
html input 如何设置禁止缓存历史记录
html input 如何设置禁止缓存历史记录
G佳伟
200 0
光影少年
|
JavaScript
动态给vue的data添加一个新的属性时会发生什么？怎样解决？
动态给vue的data添加一个新的属性时会发生什么？怎样解决？
光影少年
217 1
Mr.Meng_95
|
JavaScript
el-tree懒加载回显数据
el-tree懒加载回显数据
Mr.Meng_95
459 0
凯小默
|
JavaScript UED
vue里使用虚拟列表处理element-ui的el-select选择器组件数据量大时卡顿问题
vue里使用虚拟列表处理element-ui的el-select选择器组件数据量大时卡顿问题
凯小默
617 0
vue里使用虚拟列表处理element-ui的el-select选择器组件数据量大时卡顿问题
我的代码果然有问题
|
Web App开发 JSON JavaScript
Link 标签的预加载机制
Link 标签的预加载机制
我的代码果然有问题
341 0
Link 标签的预加载机制

热门文章

最新文章

  • 1
    OAuth 及 移动端鉴权调研
  • 2
    SQL0286N. DB2表空间的pagesize问题
  • 3
    BERT的新草料！Google从知识图谱自动生成文本，预训练史诗级增强！
  • 4
    mysql命令行修改字符编码
  • 5
    转--Notepad++配合QuickText打造快速高效的文本编辑器
  • 6
    网络问题排查
  • 7
    PFSI 开源啦，欢迎您来贡献您的代码
  • 8
    行为科学统计第一章知识点总结
  • 9
    [家里蹲大学数学杂志]第393期中山大学2015年计算数学综合考试考博试题回忆版
  • 10
    合作开发三层架构版机房中的一些工具软件
  • 1
    基于双PI控制的永磁同步电机变频调速系统simulink建模与仿真
    38
  • 2
    19期HR必读书单大揭秘：从薪酬体系搭建到绩效使能的实战指南
    33
  • 3
    短视频到底如何推荐的？深度剖析视频算法推送原理详细且专业的解读-优雅草卓伊凡-【01】短视频算法推荐之数据收集
    30
  • 4
    《AI为工业互联网设备，打造互联互通的数字桥梁》
    33
  • 5
    《驯服AI算法：让它适配边缘计算的“小身板”》
    32
  • 6
    《破局之路：跨学科协作研发AI项目的技术与理解破壁》
    27
  • 7
    《打破黑箱：深度学习模型可解释性的攻坚之路》
    21
  • 8
    《突破AI数据标注高成本枷锁，势在必行！》
    31
  • 9
    HarmonyOS ArkTS声明式UI开发实战教程
    19
  • 10
    基于NSGAII的的柔性作业调度优化算法MATLAB仿真,仿真输出甘特图
    14

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    获取百炼API-KEY