脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Element-plus延迟加载

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延迟加载内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • vue组件详解之使用slot分发内容

    vue组件详解之使用slot分发内容

    这篇文章主要介绍了vue组件详解之使用slot分发内容及Vue组件中slot的用法,需要的朋友可以参考下
    2018-04-04
  • vue等待数据渲染完成后执行下一个方法问题

    vue等待数据渲染完成后执行下一个方法问题

    这篇文章主要介绍了vue等待数据渲染完成后执行下一个方法问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-12-12
  • Vue引入腾讯地图全过程(搜索获取定位)

    Vue引入腾讯地图全过程(搜索获取定位)

    最近需要在项目中使用地图显示点位信息,所以引入了腾讯地图,这篇文章主要给大家介绍了关于Vue引入腾讯地图(搜索获取定位)的相关资料,需要的朋友可以参考下
    2023-10-10
  • Vue.js进阶知识点总结

    Vue.js进阶知识点总结

    给大家分享了关于Vue.js想成为高手的5个总要知识点，需要的朋友可以学习下。
    2018-04-04
  • 使用Vue实现调用接口加载页面初始数据

    使用Vue实现调用接口加载页面初始数据

    今天小编就为大家分享一篇使用Vue实现调用接口加载页面初始数据，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • Vue中添加滚动事件设置的方法详解

    Vue中添加滚动事件设置的方法详解

    这篇文章主要给大家介绍了关于Vue中添加滚动事件设置的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-09-09
  • vue中使用@change的方法

    vue中使用@change的方法

    @change 是 Vue.js 中用于监听表单元素值变化的事件处理器,很多组件有@change事件,那到底如何获取到当前的参数呢？本文给大家详细讲解,感兴趣的朋友一起看看吧
    2023-11-11
  • 使用Vue3实现羊了个羊的算法

    使用Vue3实现羊了个羊的算法

    这篇文章主要介绍了使用Vue3实现羊了个羊的算法,初始化的随机位置算法，通过实例代码介绍了计算偏移量的方法，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-09-09
  • vue项目配置同一局域网可使用ip访问的操作

    vue项目配置同一局域网可使用ip访问的操作

    这篇文章主要介绍了vue项目配置同一局域网可使用ip访问的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • vant 时间选择器--开始时间和结束时间实例

    vant 时间选择器--开始时间和结束时间实例

    这篇文章主要介绍了vant 时间选择器--开始时间和结束时间实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11

最新评论