监听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;
        });
相关推荐
恋猫de小郭19 分钟前
AI 可以让 WIFI 实现监控室内人体位置和姿态,无需摄像头?
前端·人工智能·ai编程
哀木24 分钟前
给自己整一个 claude code,解锁编程新姿势
前端
程序员鱼皮28 分钟前
GitHub 关注突破 2w,我总结了 10 个涨星涨粉技巧!
前端·后端·github
UrbanJazzerati31 分钟前
Vue3 父子组件通信完全指南
前端·面试
是一碗螺丝粉41 分钟前
5分钟上手LangChain.js:用DeepSeek给你的App加上AI能力
前端·人工智能·langchain
wuhen_n42 分钟前
双端 Diff 算法详解
前端·javascript·vue.js
UrbanJazzerati42 分钟前
Vue 3 纯小白快速入门指南
前端·面试
雮尘42 分钟前
手把手带你玩转Android gRPC:一篇搞定原理、配置与客户端开发
android·前端·grpc
光影少年43 分钟前
说说闭包的理解和应用场景?
前端·javascript·掘金·金石计划
是一碗螺丝粉43 分钟前
LangChain 核心组件深度解析:模型与提示词模板
前端·langchain·aigc