Element的el-table触底加载更多的实现

二狗子的翠花

已于 2022-05-10 11:18:55 修改

阅读量4.6k

点赞数 5

CC 4.0 BY-SA版权

分类专栏：前端文章标签： vue.js elementui javascript

于 2022-05-10 11:18:15 首次发布

本文链接：https://blog.youkuaiyun.com/Pure_White520/article/details/124683998

前端专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何在Vue项目中使用自定义指令`v-loadmore`实现在el-table滚动到底部时自动加载更多数据的功能。通过监听表格滚动事件，当滚动距离小于等于0.5时触发绑定的函数`loadMorePerson`，从而调用接口加载新页内容。

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

在项目中，有一个需求是el-table滚动到底部的时候再加载下一页的内容。
使用自定义指令。

自定义指令：通过v-loadmore使用。

  // 监听表格滚动
    directives: {
        loadmore: {
            bind(el, binding) {
                const selectWrap = el.querySelector(".el-table__body-wrapper");
                selectWrap.addEventListener("scroll", function () {
                    const scrollDistance =
                        this.scrollHeight - this.scrollTop - this.clientHeight;
                    if (scrollDistance <= 0.5) {
                      binding.value()//执行在使用时绑定的函数，在这里即loadMorePerson方法
                    }
                });
            },
        },
    },

在vue中的使用

 <el-table header-align="center"  v-loadmore="loadMorePerson" :data="masterInfo" height="100%" style="width: 100%;">
 	<el-table-column prop="empname" align="center" label="姓名"> </el-table-column>
 </el-table>

方法

//在这里增加页数调用接口
loadMorePerson(){

}