Element-plus表格数据延迟加载的实现方案
更新时间：2024年11月23日 11:06:28 作者：AI六月
本文介绍了在前端展示大量数据时遇到的加载卡顿问题,并提供了一种解决方案：延迟加载,具体做法是设置加载数量,对于数据量较大的情况,进行分批加载数据,通过类选择器找到表格滚动条并进行监听绑定事件,感兴趣的朋友跟随小编一起看看吧
在前端展示数据量过大的表格时，会出现加载卡顿问题。
目前业务场景（加载数据量过五万条的数据在表格中展示）
解决方案：延迟加载，设置加载数量，首先加载展示一定数量的数据，监听表格的滚动条事件，当滚动到可视化数据量的最底部触发再加载数据事件
展示效果图：
当滚动到前一次加载的数据量结束后，触发再加载事件。如图
上代码：
<el-table class="scrollbar" :data="tableData" border
style="width: 700px; height: 260px; font-size: 12px; margin-left: 20px;"
@header-click="handleTableClick">
<el-table-column prop="x" label="x" />
<el-table-column prop="压强" label="压强" />
<el-table-column prop="马赫数" label="马赫数" />
<el-table-column prop="温度" label="温度" />
<el-table-column prop="速度" label="速度" />
<el-table-column prop="燃气密度" label="燃气密度" />
</el-table>
<div style="text-align: center; font-size: 12px; color: #969292;">{{ loadDataMesssage }}</div>其中，添加类选择器 class="scrollbar"，主要作用是方便找到对应表格的滚动条
let data: any = [];
let data2: any = [];
let data3: any = [];
let data4: any = [];
let data5: any = [];
// 当前已加载的数据量
let loadedDataCount = 0;
const scrollTableDom = ref();
const loadDataMesssage = ref('');
const loadData = () => {
if (data.length < 500) {
const data1: TableDataType[] = [];
for (let i = 0; i < data.length; i++) {
data1.push({
'x': data[i].x.toFixed(4),
'压强': data[i].p.toFixed(4),
'马赫数': data2[i].mach.toFixed(4),
'温度': data3[i].temperature.toFixed(4),
'速度': data4[i].velocity.toFixed(4),
'燃气密度': data5[i].density.toFixed(4)
});
}
tableData.value = data1;
} else {
scrollTableDom.value = document.querySelector('.scrollbar .el-table__body-wrapper .el-scrollbar__wrap');
if (scrollTableDom.value) {
scrollTableDom.value.addEventListener("scroll", handleScroll);
}
const batchSize = Math.floor(data.length / 50); // 每次加载的数据量
const newData = [];
for (let i = loadedDataCount; i < loadedDataCount + batchSize && i < data.length; i++) {
newData.push({
'x': data[i].x.toFixed(4),
'压强': data[i].p.toFixed(4),
'马赫数': data2[i].mach.toFixed(4),
'温度': data3[i].temperature.toFixed(4),
'速度': data4[i].velocity.toFixed(4),
'燃气密度': data5[i].density.toFixed(4)
});
}
loadedDataCount += batchSize;
tableData.value = [...tableData.value, ...newData];
}
};
const handleScroll = (event: any) => {
const target = event.target;
const scrollContainer = target;
const scrollPosition = scrollContainer.scrollHeight - scrollContainer.scrollTop - scrollContainer.clientHeight;
if (scrollPosition <= 0 && loadedDataCount < data.length) {
console.log('滚动到底部了，加载更多数据');
loadDataMesssage.value = '正在加载...';
loadData();
} else if (scrollPosition === 0 && loadedDataCount >= data.length) {
console.log('数据为空，无法加载更多数据');
loadDataMesssage.value = '已经到底了';
} else {
loadDataMesssage.value = '';
}
};我在这里设置了两种加载方式，当数据量少于500条时，就直接赋值给表格，不会出现打开表格卡顿，当数据量大于500条时，进行分批加载数据。
通过类选择器找到表格滚动条并进行监听绑定事件，handleScroll
scrollTableDom.value = document.querySelector('.scrollbar .el-table__body-wrapper .el-scrollbar__wrap');
if (scrollTableDom.value) {
scrollTableDom.value.addEventListener("scroll", handleScroll);
}const handleScroll = (event: any) => {
const target = event.target;
const scrollContainer = target;
const scrollPosition = scrollContainer.scrollHeight - scrollContainer.scrollTop - scrollContainer.clientHeight;
if (scrollPosition <= 0 && loadedDataCount < data.length) {
console.log('滚动到底部了，加载更多数据');
loadDataMesssage.value = '正在加载...';
loadData();
} else if (scrollPosition === 0 && loadedDataCount >= data.length) {
console.log('数据为空，无法加载更多数据');
loadDataMesssage.value = '已经到底了';
} else {
loadDataMesssage.value = '';
}
};到此这篇关于Element-plus表格数据延迟加载的文章就介绍到这了,更多相关Element-plus延迟加载内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Vue2 Element description组件列合并详解
在使用Vue的时候经常会涉及到表格的列合并,下面这篇文章主要给大家介绍了给大家Vue2 Element description组件列合并的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-01-01
这篇文章主要介绍了vue中使用echarts的方法,结合实例形式详细分析了vue中使用echarts的包安装、引入、生命周期函数元素挂载等相关操作技巧与使用注意事项,需要的朋友可以参考下2023-05-05
这篇文章主要给大家介绍了利用vscode编写vue简单配置的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编一起来学习学习吧。2017-06-06
组件（Component）是Vue.js最强大的功能之一,组件可以扩展 HTML 元素,封装可重用的代码,这篇文章主要给大家介绍了关于VUE3学习教程之全局组件和局部组件的相关资料,需要的朋友可以参考下2022-01-01
这篇文章主要为大家详细介绍了vue3+ts出现白屏问题的原因与解决方法,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-03-03
这篇文章主要介绍了vue实现一个懒加载的树状表格实例，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
这篇文章主要为大家详细介绍了Vue实现表格批量审核功能实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-05-05
这篇文章主要介绍了vue2.x引入threejs,如果在开发过程中出现threejs生成的canvas出现外边框,只需要用css样式修改，本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下2022-09-09
vuecli+AXdownload下载组件封装 +css3下载悬浮球动画效果
当触发下载功能的时候,会触发一个下载动画,下载悬浮球会自动弹出,并且闪烁提示有新的下载任务直到下载任务完场提示,接下来通过本文介绍vuecli+AXdownload下载组件封装 +css3下载悬浮球动画效果,需要的朋友可以参考下2024-05-05
Vue3.5 发布已近半年,这篇文章主要来和大家技术一下它常用的新增和改动特性,文中的示例代码讲解详细,有需要的小伙伴可以跟随小编一起学习一下2025-01-01
最新评论