背景
现需要呈现一个表格,有近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修改使其尽可能像滚动条。