背景

现需要呈现一个表格，有近500行，30多列，使用vue+elementUI呈现。
这个数据量不算大，但可能列数比较多，渲染时速度很慢，滚动会有卡顿，使用体验不佳。
但并不想做分页处理，想要尽可能接近excel的呈现。

参考

网上寻找一番，参考了一些意见：
VUE,ElementUI列表大数据卡顿问题？（已解决）
element-ui table 表格大数据展示解决方案支付万级数据展示

思路

假设全部数据为allData(数组)，现在使用一个displayData（数组），displayData = allData.slice(scorll, scorll+ displayCount)，scroll表示当前滚动到的index， displayCount表示要展示的行数。把displayData设为el-table的数据源，只渲染该部分数据。通过对表格添加滚动事件监听，来动态更新scroll，并且对scroll添加watch，当scroll发生变化，就自动更新displayData。

滚动监听

监听滚动需要考虑到兼容性,火狐是DOMMouseScroll，其他的是mousewheel。

         /*指定table的ref*/this.table = this.$refs.mytable.bodyWrapper;/*浏览器兼容*/let userAgent = navigator.userAgent; //取得浏览器的userAgent字符串let ff = userAgent.indexOf("Firefox") > -1; //判断是否Firefox浏览器          if (ff) {this.table.addEventListener('DOMMouseScroll', (event) => {let detail = event.detail;//滚动方向let down = detail > 0;/**根据滚动方向和距离修改scroll的值，需要注意scroll的范围不能越界。**/});}else{this.table.addEventListener('mousewheel', (event) => {let wheel = event.deltaY;//滚动方向let down = wheel > 0;});}

slider

除了滚动表格，还需要一个模拟滚动条。这里选用slider控件，和scroll绑定。
发现elementUI的slider数值方向只能从下到上，且不能有太多的定制化。找到另外一个可深度定制化的vue slider控件：vue-slider-component。通过参数配置及css修改使其尽可能像滚动条。

el-table大数据量渲染卡顿的一种思路相关推荐

如何简单粗暴解决echars大数据量渲染卡顿问题
如何简单粗暴解决echars大数据量渲染卡顿问题直接通过yarn add echars安装echars最新版本,最新版本echars对底层点线渲染做了优化
【Element-ui】el-table大数据量渲染卡顿问题
1.场景描述在项目开发中,遇到在表格中一次性加载完的需求,且加载数量不少,有几百几千条,并且每条都可能有自己的下拉框,输入框来做编辑功能,此时普通的el-table肯定会导致浏览器卡死,那么怎么办呢 ...
WPF编写的txt阅读器（自适应各种编码，解决显示大数据量txt卡顿的问题）
运行效果如下: 右击标题栏可选择下一页,上一页,打开文件,关闭程序注意: 1.因为用textbox一次性显示1M以上的数据会特别慢,所以我在读取完txt文件之后按照每10240Byte字节为一页,每 ...
el-table 大数据量渲染，页面卡顿的解决方案
原文: el-table大数据量渲染卡顿的解决方案描述: 当el-table的数据有成千上万条,且在同一页全部展示,此时页面渲染的dom太多可能造成页面卡顿原因: 因为数据量过多导致浏览器渲染过多 ...
react大数据量渲染_React大量数据渲染的绝佳解决方案——React虚拟化组件
介绍在当下Web开发盛行的时代里,Web应用随之面临着各种问题,虽然前端框架或者前端解决方案百花齐放,但是并不是所有的问题都能很完美的解决.由于Web应用是基于浏览器渲染界面的,而由于浏览器瓶颈的限 ...
解决el-select后台一次返回大数据量渲染慢导致页面卡顿的问题
场景一解决了一次性渲染大量数据问题业务场景是后台一次返回10万多条数据需要在下拉框中展示,直接渲染会导致页面卡顿且需要很长时间等待,用户体验极差,所以我把这个改造了一下,直接上代码, 里面注释写的 ...
react大数据量渲染_React 中的状态自动保存（KeepAlive）
什么是状态保存?假设有下述场景:移动端中,用户访问了一个列表页,上拉浏览列表页的过程中,随着滚动高度逐渐增加,数据也将采用触底分页加载的形式逐步增加,列表页浏览到某个位置,用户看到了感兴趣的项目,点击 ...
react大数据量渲染_UseEffect在React中运行无限渲染（超过最大更新深度）
我有一个Cart组件,里面有一系列Cards. 每次用户从购物车中删除产品时,我都会从本地存储中删除产品, 并将其从用户界面中删除. import React, { useState, useEffe ...
关于某些系统统计查询等业务进行大数据量的测试
大数据量测试分为两种:一种是针对某些系统存储.传输.统计查询等业务进行大数据量的测试:另一种是与并发测试相结合的极限状态下的综合数据测试.如专项的大数据量测试主要针对前者,后者尽量放在并发测试中.此外 ...

el-table大数据量渲染卡顿的一种思路

背景

参考

思路

滚动监听

slider

el-table大数据量渲染卡顿的一种思路相关推荐

最新文章

热门文章