el-table表格数据滚动懒加载

最新推荐文章于 2025-03-10 17:53:56 发布

Sink_x0

最新推荐文章于 2025-03-10 17:53:56 发布

阅读量1.2k

点赞数 2

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

本文链接：https://blog.youkuaiyun.com/qq_41622983/article/details/121230959

版权

Vue 专栏收录该内容

5 篇文章

订阅专栏

mounted () {
  window.addEventListener('scroll', this.setHeadPosition, true);    
}
destroyed () {
  window.removeEventListener('scroll', this.setHeadPosition, true);
}

async setHeadPosition () {
  const that = this;
  const dom = that.$refs.table.bodyWrapper;  // 展示数据的table表格
  const distance = dom.scrollHeight - dom.scrollTop - dom.clientHeight;// 滑动条与底部的距离
  if (distance <= 5) {// 不知道为什么设置为0不一定每次都能触发，所以增大了一些数字
    // 防止在符合条件的距离里连续多次请求下一页数据
    window.removeEventListener('scroll', this.setHeadPosition, true);
    if (that.query.page < that.total) {
      that.query.page++;
      const res = await XXXResource.find(that.query);
      // 将获取的下一页数据与原数据拼接
      that.List = that.List.concat(res.data.data);
      // 数据处理之后重新监听滚动事件
      window.addEventListener('scroll', this.setHeadPosition, true);
    }
  }
}