el-table懒加载滚动分页

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第5天，点击查看活动详情

el-table懒加载滚动分页

element-ui和element-plus有使用区别：主要是滚动条所在的dom有不同，而我们必须要监听这个dom才能进行下面的操作。 element-ui版本

let dom = document.querySelector(".el-table__body-wrapper");// 

element-plus版本

let dom = document.getElementsByClassName("el-scrollbar__wrap")[1];// 

element-plus所监控的dom有区别是因为，element-plus内部封装加入了el-scrollbar组件，所以定位dom的时候需要注意当前页面它的实际位置， 如果当前使用了不止一个就要定位确定一个不会改变的位置。

lazyLoading() {
  console.log('执行滚动监听');
  let dom = document.getElementsByClassName("el-scrollbar__wrap")[1];
  dom.addEventListener("scroll", this.lazyLoad);// 
},

lazyLoading()是用于监听下面的方法

lazyLoad(){
  let dom = document.getElementsByClassName("el-scrollbar__wrap")[1];// element-plus
  // 计算滚动后距离底部的长度
  const scrollDistance = dom.scrollHeight - dom.scrollTop - dom.clientHeight;
  if (scrollDistance <= 1 && this.isLazyLoading) {
    // 计算总页数 方便下面计算
    let totalPage = this.autoDataCount / this.para.PageInfo.pageSize;
    // 页数使用 Math.ceil() 方法向上取整
    totalPage = Math.ceil(totalPage);
    // 当页数大于等于总页数时，便是达到了最后一页
    if (this.para.PageInfo.pageNum >= totalPage) {
      //判断是否到达底部
      console.log("已经到达底部")
    } else {
      this.para.PageInfo.pageNum++;// 此时页数加1
      this.isLazyLoading = false;// 此变量可配合进行防抖 如果没有可能导致滚动到底部时多次请求下一页、下下一页
      this.isLoading = true;// 表格加载的loading效果
      // setTimeout(() => {
      this.getAutoData(true);// 调用查询数据接口
      // }, 500);
      console.log("页面已经到达底部,请求第 " + this.para.PageInfo.pageNum + " 页数据");
    }
  }
}

接口获取的数据 这里写ajax请求数据，然后使用push方法或者是下面的写法，把获取到的数据放入tableData，这里必须用push，之前不用滚动懒加载倒是一般使用直接赋值的写法。
这里还需要判断滚动状态：非滚动状态下直接赋值；滚动状态下才可以使用push方法；

async getAutoData(isScroll){
  let me = this;
  arr = await this.ajax.get('http://xxxx')//
  if(isScroll){
    me.tableData = [...me.tableData, ...arr];
    me.isLazyLoading = true;
  }else{
    me.tableData = arr
    me.$nextTick(()=>{
      me.lazyLoading();
    })
  }
  me.isLoading = false
}

移除监听 清空内容（当使用搜索、重置等改变数据内容时，调用这个方法，可以消除滚轮位置异常bug）
采用的方法就是先移除监听，移除监听之后滚动条也可以恢复正常位置。

reloadLazyLoading(){
  this.isLoading = true;
  this.para= {
    queryId: "",
    PageInfo: { pageNum: 1, pageSize: 10 },
    conditions: null,
  },
  let dom = document.getElementsByClassName("el-scrollbar__wrap")[1];
  dom.removeEventListener("scroll", this.lazyLoad);
  this.tableData = [];
  this.getAutoData();
},