Element-plus表格数据延迟加载的实现方案

勇者如龙

在前端展示数据量过大的表格时，会出现加载卡顿问题。
目前业务场景（加载数据量过五万条的数据在表格中展示）
解决方案：延迟加载，设置加载数量，首先加载展示一定数量的数据，监听表格的滚动条事件，当滚动到可视化数据量的最底部触发再加载数据事件
展示效果图：

        当滚动到前一次加载的数据量结束后，触发再加载事件。如图

上代码：

1. <el-table class="scrollbar" :data="tableData" border
   
2.                                 style="width: 700px; height: 260px; font-size: 12px; margin-left: 20px;"
   
3.                                 @header-click="handleTableClick">
   
4.                                 <el-table-column prop="x" label="x" />
   
5.                                 <el-table-column prop="压强" label="压强" />
   
6.                                 <el-table-column prop="马赫数" label="马赫数" />
   
7.                                 <el-table-column prop="温度" label="温度" />
   
8.                                 <el-table-column prop="速度" label="速度" />
   
9.                                 <el-table-column prop="燃气密度" label="燃气密度" />
   
10.                             </el-table>
    
11.                             <div style="text-align: center; font-size: 12px; color: #969292;">{{ loadDataMesssage }}</div>

复制代码

       其中，添加类选择器 class="scrollbar"，主要作用是方便找到对应表格的滚动条

1. let data: any = [];
   
2. let data2: any = [];
   
3. let data3: any = [];
   
4. let data4: any = [];
   
5. let data5: any = [];
   
6. // 当前已加载的数据量
   
7. let loadedDataCount = 0;
   
8. const scrollTableDom = ref();
   
9. const loadDataMesssage = ref('');
   
10. const loadData = () => {
    
11.     if (data.length < 500) {
    
12.         const data1: TableDataType[] = [];
    
13.         for (let i = 0; i < data.length; i++) {
    
14.             data1.push({
    
15.                 'x': data[i].x.toFixed(4),
    
16.                 '压强': data[i].p.toFixed(4),
    
17.                 '马赫数': data2[i].mach.toFixed(4),
    
18.                 '温度': data3[i].temperature.toFixed(4),
    
19.                 '速度': data4[i].velocity.toFixed(4),
    
20.                 '燃气密度': data5[i].density.toFixed(4)
    
21.             });
    
22.         }
    
23.         tableData.value = data1;
    
24.     } else {
    
25.         scrollTableDom.value = document.querySelector('.scrollbar .el-table__body-wrapper .el-scrollbar__wrap');
    
26.         if (scrollTableDom.value) {
    
27.             scrollTableDom.value.addEventListener("scroll", handleScroll);
    
28.         }
    
29.         const batchSize = Math.floor(data.length / 50); // 每次加载的数据量
    
30.         const newData = [];
    
31.         for (let i = loadedDataCount; i < loadedDataCount + batchSize && i < data.length; i++) {
    
32.             newData.push({
    
33.                 'x': data[i].x.toFixed(4),
    
34.                 '压强': data[i].p.toFixed(4),
    
35.                 '马赫数': data2[i].mach.toFixed(4),
    
36.                 '温度': data3[i].temperature.toFixed(4),
    
37.                 '速度': data4[i].velocity.toFixed(4),
    
38.                 '燃气密度': data5[i].density.toFixed(4)
    
39.             });
    
40.         }
    
41.         loadedDataCount += batchSize;
    
42.         tableData.value = [...tableData.value, ...newData];
    
43.     }
    
44. };
    
45. const handleScroll = (event: any) => {
    
46.     const target = event.target;
    
47.     const scrollContainer = target;
    
48.     const scrollPosition = scrollContainer.scrollHeight - scrollContainer.scrollTop - scrollContainer.clientHeight;
    
49.     if (scrollPosition <= 0 && loadedDataCount < data.length) {
    
50.         console.log('滚动到底部了，加载更多数据');
    
51.         loadDataMesssage.value = '正在加载...';
    
52.         loadData();
    
53.     } else if (scrollPosition === 0 && loadedDataCount >= data.length) {
    
54.         console.log('数据为空，无法加载更多数据');
    
55.         loadDataMesssage.value = '已经到底了';
    
56.     } else {
    
57.         loadDataMesssage.value = '';
    
58.     }
    
59. };

复制代码

       我在这里设置了两种加载方式，当数据量少于500条时，就直接赋值给表格，不会出现打开表格卡顿，当数据量大于500条时，进行分批加载数据。
        通过类选择器找到表格滚动条并进行监听绑定事件，handleScroll

1. scrollTableDom.value = document.querySelector('.scrollbar .el-table__body-wrapper .el-scrollbar__wrap');
   
2.         if (scrollTableDom.value) {
   
3.             scrollTableDom.value.addEventListener("scroll", handleScroll);
   
4.         }

复制代码

1. const handleScroll = (event: any) => {
   
2.     const target = event.target;
   
3.     const scrollContainer = target;
   
4.     const scrollPosition = scrollContainer.scrollHeight - scrollContainer.scrollTop - scrollContainer.clientHeight;
   
5.     if (scrollPosition <= 0 && loadedDataCount < data.length) {
   
6.         console.log('滚动到底部了，加载更多数据');
   
7.         loadDataMesssage.value = '正在加载...';
   
8.         loadData();
   
9.     } else if (scrollPosition === 0 && loadedDataCount >= data.length) {
   
10.         console.log('数据为空，无法加载更多数据');
    
11.         loadDataMesssage.value = '已经到底了';
    
12.     } else {
    
13.         loadDataMesssage.value = '';
    
14.     }
    
15. };

复制代码

到此这篇关于Element-plus表格数据延迟加载的文章就介绍到这了,更多相关Element-plus延迟加载内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/javascript/331248cwl.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！