监听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;
        });
相关推荐
zhuyan1083 分钟前
Linux 系统磁盘爆满导致无法启动修复指南
前端·chrome
编程牛马姐24 分钟前
独立站SEO流量增长:提高Google排名的优化方法
前端·javascript·网络
NotFound48641 分钟前
实战指南如何实现Java Web 拦截机制:Filter 与 Interceptor 深度分享
java·开发语言·前端
Dontla1 小时前
高基数(High Cardinality)问题介绍(Prometheus、高基数字段、低基数字段)
前端·数据库·prometheus
一 乐2 小时前
医院挂号|基于springboot + vue医院挂号管理系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·论文·毕设·医院挂号管理系统
whuhewei3 小时前
为什么客户端不存在跨域问题
前端·安全
妮妮喔妮4 小时前
supabase的webhook报错
开发语言·前端·javascript
qq_12084093714 小时前
Three.js 大场景分块加载实战:从全量渲染到可视集调度
开发语言·javascript·数码相机
yivifu4 小时前
手搓HTML双行夹批效果
前端·html·html双行夹注
奔跑的卡卡5 小时前
Web开发与AI融合-第一篇:Web开发与AI融合的时代序幕
前端·人工智能