监听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;
        });
相关推荐
Hilaku5 分钟前
2025快手直播至暗时刻:当黑产自动化洪流击穿P0防线,我们前端能做什么?🤷‍♂️
前端·javascript·安全
San30.6 分钟前
深度解析 React 组件化开发:从 Props 通信到样式管理的进阶指南
前端·javascript·react.js
C_心欲无痕7 分钟前
vue3 - 内置组件KeepAlive优化组件状态缓存
前端·vue.js·缓存
Swift社区10 分钟前
跨端路由设计:如何统一 RN 与 Web 的页面模型
前端·react.js·web3
fantasy_arch15 分钟前
SVT-AV1帧类型决策-场景切换检测
前端·网络·av1
LYFlied15 分钟前
前端工程化核心面试题与详解
前端·面试·工程化
小程故事多_8030 分钟前
用Agent与大模型实现Web项目全自动化生成:从需求到部署的完整落地方案
运维·前端·人工智能·自动化·aigc
千里马-horse33 分钟前
AsyncContext
开发语言·前端·javascript·c++·napi·asynccontext
勇往直前plus35 分钟前
Jackson 反序列化首字母大写字段映射失败的底层原因与解决方案
java·开发语言·前端
转转技术团队35 分钟前
基于微前端 qiankun 多实例保活的工程实践
前端·javascript·前端工程化