el-table 实现下拉到底部加载数据

可用于所有下拉的情况,通过监听滚动条事件来记录,若当前滚动条等于0的情况为底部就进行数据获取

const timer = setInterval(() => {
        const dom = document.querySelector('.button-style');
        if (dom) {
          clearInterval(timer)
          console.log(dom);
          dom.addEventListener('scroll', (v) => {
            const scrollDistance = dom.scrollHeight - dom.scrollTop - dom.clientHeight;
            console.log(scrollDistance);
            // 判断是否到底,可以加载下一页
            if (scrollDistance <= 1) {
              // 判断是否全部加载完成
              if (this.page >= this.totalPage) {
                this.$message.warning('达到上限');
              }
              if (this.page < this.totalPage) {
                // 当前页数小于总页数就请求
                this.page++; // 当前页数自增
                // 加载下一页方法
                // this.getNextList();
                this.loading = true
                console.log('加载数据中...');
                setTimeout(() => {
                  this.loading = false
                }, 1000);
              }
            }
          });
        }
      });

 

 
posted @ 2022-08-04 16:06  YuyuFishSmile  阅读(1414)  评论(0)    收藏  举报