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

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

2023-11-01 1429
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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
目录
相关文章
小华同学ai
|
8月前
|
文字识别 自然语言处理 Java
一键搞定人脸识别、语音识别、车牌识别本地化！离线跑模型不装框架！！！
SmartJavaAI 是专为 Java 开发者打造的离线 AI 工具箱，集成人脸识别、OCR、语音识别、机器翻译等 20+ 主流模型，基于 DJL + JNI 封装，支持 Maven 一键引入，两行代码调用，让 Java 工程师无需掌握 Python/C++ 即可轻松接入 AI 能力，高效落地各类智能场景。
小华同学ai
739 1
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
1081 0
element-UI el-table动态显示隐藏列造成固定一侧的列(fixed=“left/right“)错误显示
小鎏学java
|
12月前
|
JavaScript 前端开发
forEach与map的区别
forEach与map的区别
小鎏学java
485 0
好奇的菜鸟
|
资源调度 JavaScript API
Vue-treeselect：为Vue应用程序提供强大选择器的指南
Vue-treeselect：为Vue应用程序提供强大选择器的指南
好奇的菜鸟
2936 0
游客lijmi4663rgsa
|
JavaScript 前端开发 UED
PDF在线预览实现：如何使用vue-pdf-embed实现前端PDF在线阅读
本文详细介绍了如何在Vue项目中使用vue-pdf-embed实现PDF文件的在线展示。从项目初始化、插件集成到高级功能的实现和部署优化，希望对你有所帮助。在实际项目中，灵活运用这些技术可以大大提升用户体验和项目质量。 只有锻炼思维才能可持续地解决问题，只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助，麻烦您点个赞支持一下，还可以收藏起来以备不时之需，有疑问和错误欢迎在评论区指出~
游客lijmi4663rgsa
5229 0
邹荣乐
|
前端开发 JavaScript
乾坤qiankun（微前端）样式隔离解决方案--使用插件替换前缀
乾坤qiankun（微前端）样式隔离解决方案--使用插件替换前缀
邹荣乐
3123 9
六卿
element el-table 设置fixed导致行错乱问题
文章讨论了在使用Element UI的`el-table`组件时，设置固定列（`fixed`）导致行错乱的问题，并提供了解决方案。问题产生的原因是当表格底部有滚动条而固定列底部没有滚动条时，行无法对齐。解决办法是在表格中设置`padding-bottom`的内边距与滚动条高度相等，确保固定列和非固定列的行能够对齐。
六卿
5061 0
广州爱奇迪-伍华聪
|
开发框架 前端开发 JavaScript
循序渐进VUE+Element 前端应用开发(8）--- 树列表组件的使用
循序渐进VUE+Element 前端应用开发(8）--- 树列表组件的使用
广州爱奇迪-伍华聪
535 0
广州爱奇迪-伍华聪
|
开发框架 JavaScript 前端开发
在Vue前端界面中，几种数据表格的展示处理，以及表格编辑录入处理操作。
在Vue前端界面中，几种数据表格的展示处理，以及表格编辑录入处理操作。
广州爱奇迪-伍华聪
6455 0
朝阳39
Element UI 树形控件Tree 【详解】el-tree 展开指定节点，判断是否存在指定节点
Element UI 树形控件Tree 【详解】el-tree 展开指定节点，判断是否存在指定节点
朝阳39
3082 0

热门文章

最新文章

  • 1
    阿里云域名注册入口
  • 2
    十年磨一剑，阿里巴巴企业级数据管理平台：iDB
  • 3
    Promise实现原理（附源码）
  • 4
    ES6之Object.assign()用法，Object.assign()到底是浅拷贝还是深拷贝？
  • 5
    小红书如何实现高效推荐？解密背后的大数据计算平台架构
  • 6
    JAVA实现的支付宝扫描二维码支付
  • 7
    从0开始在阿里云上搭建基于通义千问的钉钉智能问答机器人
  • 8
    【最全最详细】publiccms使用教程
  • 9
    Xss scanner
  • 10
    【编译打包】drbd 8.4.2
  • 1
    10类可食用蘑菇检测4000张YOLO农业采摘数据集分享
    30
  • 2
    Excelize 开源十周年，发布 2.11.0 版本
    28
  • 3
    路面缺陷检测数据集（9类YOLO已标注已划分）道路病害目标检测专用数据集分享
    55
  • 4
    包裹计数目标检测数据集（约6000张单类别YOLO标注已划分）源码分享
    28
  • 5
    野生菌有毒无毒物种识别数据集野生菌智能识别分享
    31
  • 6
    祁木CAD Translator 原理拆解：基于百炼云技术的DWG/DXF工程图纸结构化翻译技术解析
    58
  • 7
    中国交通标志目标检测数据集：58类别 | 目标检测
    66
  • 8
    2026年阿里云百炼Coding Plan全解析：Pro套餐额度与工具接入完整指南
    43
  • 9
    2026年阿里云通义千问大模型API全栈接入教程：PHP/Java/.NET/Python/Go五语言完整实战
    51
  • 10
    Sentinel 流量治理实战：熔断降级限流 + Nacos 持久化
    31

    • 相关电子书

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