监听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;
        });
相关推荐
无心使然几秒前
OpenLayers 10.9.0 渲染架构分析
前端·gis·数据可视化
智能制造产品经理代码提升2 分钟前
ES6+ 标准使用手册
前端·javascript·es6
xiaofeichaichai6 分钟前
ES6+ 模块
前端·ecmascript·es6
xuankuxiaoyao8 分钟前
阶段案例——后台管理系统
java·linux·前端
恋猫de小郭9 分钟前
Android 17 内存管理将严格管控,App 要注意适配
android·前端·flutter
暗冰ཏོ12 分钟前
《uni-app 跨端开发完整指南:从基础入门到 H5、小程序、App 发布上线》
前端·小程序·uni-app·vue·html5
搬砖的前端15 分钟前
AI工具集:Git提交时使用AI进行CodeReview如何在前端应用构建NPM包
前端·人工智能·git·npm·codeview
Bigger27 分钟前
mini-cc 终端 UI:用 React 写 CLI 是什么体验
前端·react.js·ai编程
在水一缸33 分钟前
警惕供应链陷阱:从 Red Hat npm 恶意包事件看依赖安全防护
前端·安全·npm·供应链安全·red hat·恶意包·依赖安全
川冰ICE39 分钟前
JavaScript进阶③|Map_Set_WeakMap_WeakSet,新型数据结构
开发语言·javascript·数据结构