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 @   YuyuFishSmile  阅读(1352)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
历史上的今天:
2021-08-04 微信小程序自定义组件学习(一)
点击右上角即可分享
微信分享提示