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

在项目中，有一个需求是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(){
    
    

}