el-table触底分页请求数据

方式1：自定义事件

源码地址【vue自定义口令批量el-table表格触底加载】_el-table触底事件vue2-CSDN博客

方式2:

<!-- 指定ref --> 
<el-table ref="tableContent"></el-table>

  $refs!: {
    tableContent: Table; // 表格内容
  };

/**
   * @description: 列表懒加载
   * @return
   */
  watchTableScroll(): void {
    const tableBody: any = this.$refs.tableContent.$refs.bodyWrapper;
    if (tableBody) {
      tableBody?.addEventListener(
        "scroll",() => {
          const { clientHeight, scrollHeight, scrollTop } = tableBody;
          if (scrollTop + clientHeight + 1 > scrollHeight) {
            if (this.pagination.pageNum * this.pagination.pageSize < this.pagination.total) {
              this.pagination.pageNum += 1;
              this.getTableData(); //调用接口获取下一页数据
            }
          }
        },
        true,
      );
    }
  }

 mounted内调用；注意：可能拿不到DOM，建议nextTick包一下，但是我这还是拿不到 就直接定时器了

  mounted(): void {
    setTimeout(() => {
      this.watchTableScroll();
    }, 1500);
  }

 总结：两种方法的实现都是通过，添加监听scroll事件，通过判断滚动高度。

如果有优化的地方随时踩踩~~~