el-table 触碰底部加载更多（转载）

<template>
    <div class="warp">
      <el-table header-align="center"  v-loadmore="loadMorePerson" :data="masterInfo" height="200px" style="width: 100%;">
        <el-table-column prop="name" align="center" label="姓名">
        </el-table-column>
      </el-table>
    </div>
  </template>
  
  <script>
  // 时间转换
  export default {
    data() {
      return {
        masterInfo:[],
        //页码
        index:0,
      }
    },
    created() {
      this.loadMorePerson()
    },
    methods: {
      loadMorePerson() {
        this.index = this.index+1;
        this.$axios.post("url", {
          page:{
            'orderBy': "create_time desc",
            'orderType': "desc",
            'pageIndex': this.index,
            'pageSize': 5,
          }
          }).then((res) => {
            res.data.list.forEach(v => {
              var object={};
              object.name = v.name;
              this.masterInfo.push(object);
            });
            console.log(this.masterInfo);
        });
      },
    },
    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方法
            }
          });
        },
      },
    },
  }
  </script>

转载链接：https://blog.csdn.net/Pure_White520/article/details/124683998
参考链接：Vue自定义指令实现下拉加载：v-loadmore