监听el-table滚动

javascript 复制代码
mounted() {
    // 监听el-table滚动
    window.addEventListener("scroll", this.loadMore, true);
  },

后端接口没有分页,一次性返回全部数据,前端监听滚动条加载数据。

this.tableList当前表格展示的数据

this.allTableData接口获取的全部数据

javascript 复制代码
 loadMore() {
      let curlens = this.allTableData.length;
      let showlens = this.tableList.length; 
      if (showlens >= curlens) {
        return;
      } else {
          this.tableList.push(
            ...this.allTableData.slice(showlens, showlens + 10)
          );
      }
    },
//接口获取表格数据

 abStsLog(this.filters).then((res) => {
          this.tableList = res.data.slice(0,20);
          this.allTableData = res.data;
          this.listLoading = false;
        });
相关推荐
计算机毕设VX:Fegn08954 分钟前
计算机毕业设计|基于springboot + vue汽车销售系统(源码+数据库+文档)
数据库·vue.js·spring boot·后端·汽车·课程设计
仅此,5 分钟前
前端接收了id字段,发送给后端就变了
java·前端·javascript·spring·typescript
Lovely Ruby7 分钟前
[前端] 封装一下 echart 6,发布到 npm
前端·npm·node.js
BD_Marathon9 分钟前
NPM_常见命令
前端·npm·node.js
樱桃园园长10 分钟前
【Three.js 实战】手势控制 3D 奢华圣诞树 —— 从粒子系统到交互实现
javascript·3d·交互
绿鸳12 分钟前
12.17面试题
前端
二狗哈17 分钟前
Cesium快速入门30:CMZL动画
javascript·3d·webgl·cesium·地图可视化
Huanzhi_Lin25 分钟前
禁用谷歌/google/chrome浏览器更新
前端·chrome
咸鱼加辣29 分钟前
【前端的crud】DOM 就是前端里的“数据库”
前端·数据库
kong790692832 分钟前
环境搭建-运行前端工程(Nginx)
前端·nginx·前端工程