在以前公司开发的时候,有过开发表格的经历,表格我们一般使用element-UI
,element-UI
这个表格它其实有一个致命的缺点,它会出现加载大量数据,会卡顿的现象,就是它会出现白屏。
如何解决它的卡顿现象:
加载大量数据一直是个历史性难题,一般情况下在做:报表,所有的表跟数据加载到一个里面了,以表格加载数据过大问题,它就会出现卡顿现象。
其中有很多方案,例如:
- 利用
C3
里的一些特性(transform
),让它在加载表格的时候,它不先加载这些东西,在向下拉的时候在去加载; - 虚拟渲染:它会让你感觉把所有数据加载完了,但实际上它加载的只是头部,中间的可见区域跟下面的可见区域等你拉倒那一块时才会去加载;
- 使用人家给提供好的一个库,用这个库去实现表格的一个大量加载,
clusterize
这个库是被封装好的一个库,这个库它就运用能让眼睛有一个视觉上的效果,你感觉加载完了这么多数据,但实际上它只加载完了上下两块,现在用这个库的结合clusterize+element-UI
实现了不管是表格还是div
它都可以实现大量加载,甚是可加载上万级别的而且还不会感觉到卡顿;
这是当前代码:
GridView.vue
组件
<template>
<div>
<el-table
:data="tableData" style="width: 100%">
<el-table-column
v-for="cls in columns"
:prop="cls.prop"
:key="cls.prop"
:label="cls.title"
:width="cls.width"
>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
props: ["tableData", "columns"],
name: "GridView",
};
</script>
<style>
</style>
MyGridView.vue
组件
<template>
<div id="MyGridView">
<GridView :columns="columns" :tableData="tableData"/> //全局组件
</div>
</template>
<script>
export default {
name: "MyGridView",
data() {
return {
columns: [
{
prop: "date",
title: "日期",
width: "180",
},
{
prop: "name",
title: "姓名",
width: "180",
},
{
prop: "address",
title: "地址",
width: "180",
},
],
};
},
computed: {
tableData() {
let arr = [];
for (let i = 0; i < 10000; i++) {
arr.push({
date: `${
new Date().getMinutes()}
:${
new Date().getSeconds()}`,
name: "门" + i,
address: "石家庄" + i,
});
}
return arr;
},
},
};
</script>
<style>
</style>
接下来,用第三种方法去解决加载大量数据的卡顿现象:
clusterize官网: https://clusterize.js.org/
使用这个压缩过后的:
将它引入index.html
文件夹:
在dist
文件夹下创建clusterize.js
文件,将https://cdnjs.cloudflare.com/ajax/libs/clusterize.js/0.18.0/clusterize.js
里面代码放入:
css
文件以同样方式放入;
index.html
文件引入方式修改,因为打包上线后它是在dist
目录下:
GridView.vue
组件 写入mounted
getRowsAmount
返回当前所有条数据
<template>
<div id="scrollArea">
<el-table :data="tableData" style="width: 100%">
<el-table-column
v-for="cls in columns"
:prop="cls.prop"
:key="cls.prop"
:label="cls.title"
:width="cls.width"
>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
props: ["tableData", "columns"],
name: "GridView",
mounted() {
//加载完成之后
setTimeout(() => {
var clusterize = new Clusterize({
rows: document.querySelectorAll(".el-table__row"), // 类 el-table_row
scrollElem: document.getElementById("scrollArea"), //#scrollArea
contentElem: document.querySelector(".el-table__body tbody"), //.el-table_body tbody
});
// getRowsAmount 返回当前所有条数据
console.log(clusterize.getRowsAmount())
},1000);
},
};
</script>
<style>
#scrollArea {
height: 500px;
overflow-y: auto;
}
</style>
OK,打开浏览器加载一下
拜