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

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

2023-11-01 1504
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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
目录
相关文章
祈澈菇凉
|
移动开发 安全
uniapp打包成H5遇到的坑，本地访问页面空白
uniapp打包成H5遇到的坑，本地访问页面空白
祈澈菇凉
2249 0
song19990524
uniapp 全局数据（globalData）的设置，获取，更改
uniapp 全局数据（globalData）的设置，获取，更改
song19990524
4042 0
GoodTime
|
JavaScript
element-UI el-table动态显示隐藏列造成固定一侧的列(fixed=“left/right“)错误显示
问题原因：多个tabs共用一个实体，动态显示隐藏列 出现了固定在右侧的列(fixed="right")错位 【解决方案】 表格的重新布局，只要table数据发生变化的时候就重新渲染表格 ```js this.$nextTick(() => { this.$refs.formname.doLayout() }) ``` 参考element官方文档 ![请在此添加图片描述](https://developer-private-1258344699.cos.ap-guangzhou.myqcloud.com/column/article/5877188/20231030-e40
GoodTime
1242 0
element-UI el-table动态显示隐藏列造成固定一侧的列(fixed=“left/right“)错误显示
范德萨_
window.scrollTop 不生效的原因，如何解决
window.scrollTop 不生效的原因，如何解决
范德萨_
1271 0
fruge365
|
JavaScript
【vue】 vue-seamless-scroll 无缝滚动依赖
【vue】 vue-seamless-scroll 无缝滚动依赖
fruge365
2468 1
好奇的菜鸟
|
资源调度 JavaScript API
Vue-treeselect：为Vue应用程序提供强大选择器的指南
Vue-treeselect：为Vue应用程序提供强大选择器的指南
好奇的菜鸟
3098 0
游客lijmi4663rgsa
|
JavaScript 前端开发 UED
PDF在线预览实现：如何使用vue-pdf-embed实现前端PDF在线阅读
本文详细介绍了如何在Vue项目中使用vue-pdf-embed实现PDF文件的在线展示。从项目初始化、插件集成到高级功能的实现和部署优化，希望对你有所帮助。在实际项目中，灵活运用这些技术可以大大提升用户体验和项目质量。 只有锻炼思维才能可持续地解决问题，只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助，麻烦您点个赞支持一下，还可以收藏起来以备不时之需，有疑问和错误欢迎在评论区指出~
游客lijmi4663rgsa
5531 0
小猫娃来啦
echarts的xAxis和yAxis——x轴y轴以及网格线的详细配置
echarts的xAxis和yAxis——x轴y轴以及网格线的详细配置
小猫娃来啦
7819 0
1693805046
|
缓存 安全 前端开发
Electron on macOS: 揭秘 MacUpdater 如何实现无缝自动更新？
本文首发于微信公众号“前端徐徐”，详细探讨了 Electron 应用在 macOS 平台上的更新原理。文章分析了 `MacUpdater` 类的实现，包括与 Electron 原生更新器的集成、更新检测和下载、代理服务器管理、环境适配、安全性保障、错误处理和日志记录、更新安装流程控制以及缓存管理等关键功能。通过这些技术细节，展示了如何在 macOS 上实现高效、安全的 Electron 应用更新。
1693805046
812 0
Electron on macOS: 揭秘 MacUpdater 如何实现无缝自动更新？

热门文章

最新文章

  • 1
    阿里云免费商标注册查询系统入口链接（支持图片检索）
  • 2
    「Serverless云开发72变」来左边跟我一起画个龙，右边跟我用AntV画个图
  • 3
    千问大模型全方位使用指南：网页版、API与智能体一站式教程
  • 4
    一文轻松搞懂redis集群原理及搭建与使用
  • 5
    【Node.js 版本过高】运行前端时，遇到错误 `Error: error:0308010C:digital envelope routines::unsupported`
  • 6
    Vue中如何实现兄弟组件之间的通信
  • 7
    计算机组成原理的缓存
  • 8
    第一章 函数
  • 9
    行链接和行迁移案例
  • 10
    unit 12 习题
  • 1
    小凝 Agent：模式不够用之后，我给系统补了一层体系视角
    26
  • 2
    阿里云服务器ECS镜像如何选择？哪个更合适？更稳定？
    26
  • 3
    阿里云服务器带宽计费模式怎么选合适？按固定带宽和使用流量省钱方法？
    28
  • 4
    【Azure 应用服务】App Service 自动扩容时，如何避免新实例尚未就绪就接收流量（健康检查篇）？
    32
  • 5
    2026 年阿里云双 11 活动低价服务器解析，38、68、99、199 元机型配置与规则
    30
  • 6
    2026 年阿里云双 11 活动 AI + 算力专场，Token Plan、千问办公、云服务器福利解析
    27
  • 7
    2026 年阿里云双 11 活动服务器选购，199 元特惠机型配置、购买渠道、续费答疑
    21
  • 8
    2026 年阿里云双 11 活动 AI 编程福利，Qoder 19.9 元首月，各版本价格整理
    52
  • 9
    2026 年阿里云双 11 活动必看，轻量、ECS、GPU 算力和 AI 模型优惠清单
    22
  • 10
    2026 年阿里云双 11 活动千问 AI 专场，Token Plan 低价上线，模型与 Agent 一站式配齐
    47

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    一条命令迁移，帮你实现 OpenClaw 与 Hermes Agent 记忆互通！