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

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

2023-11-01 477
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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
目录
相关文章
游客4llb6htoixmxw
|
3月前
|
JavaScript 前端开发 开发者
如何检测浏览器是否支持最新的 image lazy loading 特性
如何检测浏览器是否支持最新的 image lazy loading 特性
游客4llb6htoixmxw
27 0
timfan
|
API
Element UI Loading 加载组件动态变更 text 值（加载文案）
有这样的一个需求，我在上传文件的时候，上传阶段耗时较长，所以利用加载动画作为友好提示用户等待。
timfan
1087 0
Element UI Loading 加载组件动态变更 text 值（加载文案）
Lux_Sun
Element UI - el-table 渲染慢，卡的原因
Element UI - el-table 渲染慢，卡的原因
Lux_Sun
2196 0
小王老师呀
|
10天前
|
缓存 UED
清除 Nuxt 状态缓存：clearNuxtState
【8月更文挑战第9天】在Nuxt.js中，适时清除状态缓存对保持数据准确性至关重要。当数据更新或需避免多用户间的数据冲突时，清除缓存可确保显示最新状态。可通过创建插件定义`clearNuxtState`方法实现，如用户操作后重置Vuex状态。组件内也可调用此方法。使用时应注意谨慎操作及考虑性能影响，避免不必要的缓存清除以优化用户体验。
小王老师呀
22 5
朝阳39
|
1月前
|
缓存 JavaScript
vue 页面缓存 keep-alive（含配置清除页面缓存 exclude，局部缓存，动态缓存，路由控制缓存 $route.meta.keepAlive）
vue 页面缓存 keep-alive（含配置清除页面缓存 exclude，局部缓存，动态缓存，路由控制缓存 $route.meta.keepAlive）
朝阳39
24 0
球球不吃虾
|
3月前
|
存储 缓存 JavaScript
vue中缓存页面数据（刷新不丢失）
vue中缓存页面数据（刷新不丢失）
球球不吃虾
204 1
秋叶原的琴音
|
9月前
|
缓存 JavaScript
vue中页面缓存keep-alive控制缓存清除
vue中页面缓存keep-alive控制缓存清除
秋叶原的琴音
108 0
你挚爱的强哥
|
3月前
|
测试技术
【sgLazyTree】自定义组件：动态懒加载el-tree树节点数据，实现增删改、懒加载及局部数据刷新。
【sgLazyTree】自定义组件：动态懒加载el-tree树节点数据，实现增删改、懒加载及局部数据刷新。
你挚爱的强哥
70 0
GoodTime
|
8月前
|
JavaScript
Vue + Element UI 实现复制当前行数据功能(复制到新增页面组件值不能更新等问题解决)
# 1、需求 使用Vue + Element UI 实现在列表的操作栏新增一个复制按钮，复制当前行的数据可以打开新增弹窗后亦可以跳转到新增页面，本文实现为跳转到新增页面。 # 2、实现 ## 1）列表页 index.vue ```html <el-table> <!-- 其他列 --> <el-table-column label="操作" width="150"> <template slot-scope="scope"> <el-button icon="el-icon-copy-document" title="复制" @click="toCopyNew(scope
GoodTime
95 0
光影少年
|
11月前
|
JavaScript
动态给vue的data添加一个新的属性时会发生什么？怎样解决？
动态给vue的data添加一个新的属性时会发生什么？怎样解决？
光影少年
162 1