监听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;
        });
相关推荐
凌览几秒前
为什么我不推荐一人公司用PostgreSQL
前端·后端·node.js
王琦03184 分钟前
shell 第二章 变量和引用
前端·chrome
暗中讨饭xdm5 分钟前
立体echarts柱状图咋做
前端·vue.js·echarts
wuhen_n13 分钟前
阿里云百炼平台 API 接入教程(附 Node.js + TypeScript 实战)
前端·人工智能·阿里云·ai编程
码语智行13 分钟前
操作日志注解模块
java·前端·python
CDN36014 分钟前
【前端实战】LCP指标从2.5s优化至0.8s!用360CDN的WebP自适应与缓存策略榨干性能
前端·缓存
星辰_mya16 分钟前
ThreadLocal之微服务链路追踪
java·开发语言·前端
会编程的土豆20 分钟前
前端和后端是怎么配合工作的(Go后端视角)
前端·golang·状态模式
w_t_y_y21 分钟前
vue父子组件通信(一)父子调用和通信(2)VUE3
前端·javascript·vue.js