element-ui，table增加虚拟列表

最新推荐文章于 2025-06-20 10:29:46 发布
最新推荐文章于 2025-06-20 10:29:46 发布
阅读量1w 收藏 11
点赞数 1
CC 4.0 BY-SA版权
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/MoreFeels/article/details/81014432
为了解决大量DOM元素导致的滚动卡顿问题，本文介绍了一种基于Vue的虚拟列表实现方案。该方案通过计算可视区域内的DOM数量，并利用CSS的translate属性来优化滚动性能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

参考文献https://juejin.im/entry/5aaf66f56fb9a028c71e403e

由于业务需要，当大批量的dom（10W个场景）展现在table中，会导致滚动条卡顿，因此需要开发一个虚拟列表的功能

原理：根据grid的高度，计算展现条数，通过css属性，transform中的translate(x,y)方法实现，将数据先保存至js的变量中，每次计算以后，slice数组中的数据，更新至table的data中

css样式设置

这里写图片描述

解决快速滚动至底部，grid空白
这里写图片描述

这里写图片描述

注册scroll监听
这里写图片描述

使用变量保存scrollTop
这里写图片描述

vue监听变量scrollTop
这里写图片描述

基于element-ui el-table 开发虚拟列表(树形列表)
j_bleach的博客
06-21 9559
普通列表 主要方法：calcList <template> <div id="app"> <!-- :expand-row-keys="currentExpend" --> <!-- <div style="height: 800px"></div>--> <el-form ref="form" :model="form" label-width="80px" :rules="rules"
vue+element虚拟列表
qq_42345136的博客
05-25 1706
虚拟列表，简单的，多行，格式没有严格正确，注意嵌套div中内层div内容为空，且设为index为-1，table采用粘性定位，但稳定性不够，待改进 <template> <div id="contain" ref="contain" @scroll="scrollListener"> <div id="table1" ref="table1"></div> <el-table .
element全网最简单el-table实现虚拟列表
weixin_46345861的博客
08-22 7090
element全网最简单el-table实现虚拟列表
vue2.0虚拟列表组件【vue-virtual-scroller】
最新发布
qq_1336674576的博客
06-20 530
vue2.0虚拟列表组件【vue-virtual-scroller】
【无标题】el-table实现虚拟列表
pingguo函数的博客
11-25 2795
el-table实现虚拟列表。
element 下拉数据过多，导致列表卡顿加载慢，使用虚拟列表方式
chenasia的博客
08-10 1410
element 下拉数据过多，导致列表卡顿加载慢，使用虚拟列表方式渲染，无需分页 结合vxe-list
element-ui 使用el-select创建虚拟下拉列表
qq_21691233的博客
03-14 1893
虚拟列表 elementui vue
element-ui-2.13.0.rar
07-03
1. **组件库**：Element UI 提供了大量的 UI 组件，如按钮（Button）、表格（Table）、下拉菜单（Dropdown）、轮播图（Carousel）、时间选择器（TimePicker）、日期选择器（DatePicker）、输入框（Input）、开关...
element-ui-最新版离线文档-2.15.6.zip
10-28
Element UI 是一个基于 Vue.js 的开源 UI 组件库，它为开发者提供了丰富的组件，用于构建美观、可自定义的企业级前端界面。这个“element-ui-最新版离线文档-2.15.6.zip”文件包含了 Element UI 最新版本 2.15.6 的...
agel-table:element-ui table 的二次封装，保持灵活性，极简的思想，更少的代码，更多的功能，更快速的开发 :up_arrow::up_arrow::up_arrow:
04-10
agel-table | 使 element-ui table 组件更简单 文档 （gitee 提供服务，国内较快） （github 提供服务） 特性 该组件的思想就是以一个 table 对象来做所有的操作，哪怕页上多个列表也不用在 data 定义一堆 data1,...
vue+基于element-ui的表格封装组件
01-31
这个组件的主要目标是通过封装Element-UI中的Table组件，实现更高效、更灵活的表格管理和样式调整。 首先，让我们了解一下Vue.js。Vue.js是一个轻量级的前端JavaScript框架，以其简单易学、易用性和高性能著称。Vue...
使用 Vue 实现一个虚拟列表的方法
10-16
主要介绍了使用 Vue 实现一个虚拟列表的方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
vue element-ui table表格滚动加载方法
11-30
添加全局注册事件，用来监听滚动事件 window.Vue.directive('loadmore', { bind(el, binding) { const selectWrap = el.querySelector('.el-table__body-wrapper') selectWrap.addEventListener('scroll', function() { let sign = 100 const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight if (scroll
elementui结合虚拟列表umy-ui使用
sisyphus0000的博客
02-20 1220
elementui结合虚拟列表umy-ui使用
vue里使用虚拟列表处理element-ui的el-select选择器组件数据量大时卡顿问题
学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等
09-20 6508
当我们使用el-select选择器下拉数据很大的时候，会出现页面卡顿，甚至卡死的情况，用户体验很不好。我目前采取的方案是使用虚拟列表的方式去处理这个问题。数据获取完毕： 点击输入框：我们可以看到 2 万条数据只展示了 30 条。 我们滚动找到 kaimo-666，选择它 我们再次点击输入框，我们以及定位到了 kaimo-666 这个位置 另外拓展了点击项目跟输入框数据改变的事件我基于 跟 实现了下拉虚拟列表，解决下拉选择框数据量大时卡顿问题。代码地址：https://github.com/kaimo31
vue2中使用自定义指令实现el-table虚拟列表
Zhang_zhang__的博客
01-13 1152
在实际开发中，我们可能会面临其他需求，例如在 el-table 中无法使用分页技术的情况下展示海量数据。这种情况下，页面可能会出现卡顿，严重时甚至可能引发浏览器崩溃。
Element UI 选择器使用 vue-virtual-scroller 改为虚拟列表
qq_39409541的博客
02-07 429
element ui 中 el-select 使用 vue-virtual-scroller 实现虚拟滚动列表
基于 Element UI 适用于 Vue 2 版本的虚拟列表选择器组件el-select
qq_37899792的博客
12-25 4942
基于 Element UI 适用于 Vue 2 版本的虚拟列表选择器组件。
el-table虚拟列表实现代码
weixin_42601702的博客
12-21 574
el-table 虚拟列表是指在表格中只渲染视窗内的行和列，可以帮助您提升表格的渲染性能。 使用 el-table 虚拟列表的方法是，首先在 el-table 上设置属性 "highlight-current-row" 和 "stripe"，然后在 el-table-column 中设置 "resizable" 属性以启用调整列宽的功能，最后在 el-table 上设置 "row-key" 属性以...
element-ui el-table虚拟滚动
02-10
### Element-UI 中 `el-table` 组件实现虚拟滚动 为了提高大型数据集渲染效率，可以采用虚拟列表技术来优化表格性能。虽然官方文档并未直接提供内置的虚拟滚动功能[^1]，但可以通过第三方库或自定义逻辑实现这一...
评论 13
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值