Element-Plus Table表格数据量大卡顿解决【万级数据量】

1、效果：

2、实现思路：

    1、当数据量巨大且不分页，就会造成超多DOM，实现思路就是动态替换视图中的数据。

    2、怎么解释呢，看上面的效果图，视图中有6行数据，无论如何都只加载6行，监听滚动，不断替换这6行的数据，就实现了表格滚动的效果。

    3、那么，实现这个功能，需要有三个步骤要实现：

    第一，是做一个假的滚动条，滚动条盒子的高度就是数据量*每行高度；

    第二，由于表体和滚动条是分开的，因此需要给表体添加一个监听滚动，当假滚动条或者表体滚动时，都可以获取滚动距离，从而计算替换哪些数据。

    第三，不断获取假滚轮滑块距离假滚动条盒子顶部的距离“scrollTop”，那么滚动条盒子的高度scrollTop/每行高度等于一个值，这个值就是前面已显示了多少条。例如：

    数据是个数组const Data = [1,2,3 .......]，数组长度1000条，也就是数据量1000；

    假设表格每行设计高度是10px，显示6行，那么假滚动条的高度就是1000* 10px = 10000px；

    假设当前滚动条滑块的scrollTop是 1000px；

    那么表体应该只显示数组索引100到100+6数据；

3、代码：

<script setup>
import { onMounted, reactive, ref } from "vue";
import data from "./data/data.json";
let tableData = data; //表格数据
let scollBoxHeight = ref(1000); //假滚动条高度
let fromPage = ref(0); //分割数据 from
let toPage = ref(10); //分割数据 to

// dom
let falseboxDOM = ref(null); //假滚动条的dom

onMounted(() => {
  // 设计每行高度是30px
  // 计算假滚动条高度 
  // 再加上一行的高度，否则最后一行的数据看不到
  scollBoxHeight.value = tableData.length * 30 + 30;
});

// 控制滚轮滑动时，不断计算数据的显示范围
function scrollPositon() {
  let scolldisRecords = Math.ceil(falseboxDOM.value.scrollTop / 30);
  fromPage.value = scolldisRecords;
  toPage.value = scolldisRecords + 10;
}

// 为table绑定滚动
function TableMousewheel(e) {
  //当在表体上滚动时，获取滚动距离并给假滚动条加上
  falseboxDOM.value.scrollTop += e.deltaY;
}
</script>

完整源码下载：

https://mbd.pub/o/bread/ZpmZlJ5v

参考文章：element中el-table大数据量渲染卡顿问题_vue el-table数据过多,页面卡死-CSDN博客https://blog.csdn.net/weixin_44231085/article/details/134316594