vue el-table表格数据,不分页,鼠标滚动实现数据懒加载

最新推荐文章于 2025-03-10 17:53:56 发布

Code神之手

最新推荐文章于 2025-03-10 17:53:56 发布

阅读量1.1w

点赞数 12

分类专栏： vue 前端文章标签： r语言 vue.js

本文链接：https://blog.csdn.net/Seven71111/article/details/120739925

版权

vue 同时被 2 个专栏收录

27 篇文章

订阅专栏

前端

24 篇文章

订阅专栏

本文介绍了如何在不使用分页的情况下，通过数据懒加载技术实现在页面滚动底部自动加载更多数据。通过实例展示了 Vue 中的 Element UI 表格组件如何配合监听滚动事件实现滚动触发数据加载。创建时预加载20条数据，当用户滚动接近底部时，动态增加新的数据项并更新表格。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当前有一个需求，页面不分页，又想在一页显示全部数据，这个时候其实就可以用数据懒加载。

随鼠标滚动到滚动条末尾，自动加载下一页的数据。created的时候默认加载20条数据。

这里差不多到末端了

鼠标滑到末端后，触发加载第二页数据

代码实现：

先定义个table (getPageBodyHeight 方法是我通过页面自适应监听页面宽高变化，之前帖子有栗子，计算table的高度，简单点的可以自己设置固定高度)

<el-table border
                  v-loading="loading"
                  :data="tableData"
                  :row-key="getRowKeys"
                  :height="getPageBodyHeight">
          <el-table-column type="selection" :reserve-selection="true" width="50"></el-table-column>
          <el-table-column prop="cla" :label="$t('列1')" show-overflow-tooltip></el-table-column>
          <el-table-column prop="clb" :label="$t('列2')" show-overflow-tooltip></el-table-column>
          <el-table-column prop="clc" :label="$t('列3')" show-overflow-tooltip></el-table-column>
          <el-table-column prop="cld" :label="$t('列4')" show-overflow-tooltip></el-table-column>
          <el-table-column prop="cle" :label="$t('列5')" show-overflow-tooltip></el-table-column>
          <el-table-column prop="clf" :label="$t('列6')" show-overflow-tooltip></el-table-column>

        </el-table>

栗子中主要用到的几个变量

        data() {
            return {
                loading: false,
                tableData: [],
                pagination: {
                    page: 1,
                    pageSize: 20,
                    total: 0,
                },
                totalPage: 5,
                countTotal: 20,
                selectedIds:[],
                checked:false,
                otherHeight:0,
                pageHeight:0,
            }
        },

creatde中模拟默认查询20条数据

        created() {
            //this.defaultDataTime();
            //this.search();

            this.tableData = []
            for (let i = 1; i <=this.countTotal ; i++) {
                this.tableData.push({"cla": "cla-"+i,"clb": "clb-"+i,"clc": "clc-"+i})
            }
        },

重点：在mounted中设置监听鼠标滚动事件

mounted() {
            //this.watchSize();
            this.lazyLoading();
        },

            lazyLoading(){
                let dom = document.querySelector(".el-table__body-wrapper");
                dom.addEventListener("scroll", (v) => {
                    const scrollDistance = dom.scrollHeight - dom.scrollTop - dom.clientHeight;
                    console.log("鼠标滑动-scrollDistance",scrollDistance)
                    // if (scrollDistance <= 0) {  //分辨率问题，如果设置 100% ，滑倒最底部，scrollDistance的值 可能为 0.201 到 -0.201
                    if (scrollDistance <= 1) {
                        //等于0证明已经到底，可以请求接口
                        if (this.pagination.page >= this.totalPage) {
                            //判断是否到达底部
                            // this.$message.warning("我~是有底线的 (～￣▽￣)～");
                            console.log("我~是有底线的 (～￣▽￣)～")
                        }
                        if (this.pagination.page < this.totalPage) {
                            //当前页数小于总页数就请求
                            this.pagination.page ++; //当前页数自增
                            console.log("页面已经到达底部,可以请求接口,请求第 "+ this.pagination.page + " 页数据");

                            var cIndex = this.countTotal + 10 ;
                            for (let i = (this.countTotal + 1) ; i <= cIndex ; i++) {
                                this.tableData.push({"cla": "cla-"+i,"clb": "clb-"+i,"clc": "clc-"+i})
                            }
                            this.countTotal += 10 ;
                            //this.getData();
                            // this.append();
                        }
                    }
                });
            },