监听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;
        });
相关推荐
哟哟-4 分钟前
Nginx配置:静态文件访问时动态添加时间戳
运维·前端·javascript·nginx
码云数智-园园12 分钟前
自助建站哪个好?三款主流自助建站对比评测
前端
肆忆_16 分钟前
C++ 汇编层面与语法语义层面总结:this指针 模板 块级作用域 引用
前端
用户40993225021219 分钟前
Vue中默认插槽、具名插槽、作用域插槽如何区分与使用?
前端·vue.js·github
zheshiyangyang24 分钟前
前端面试基础知识整理【Day-3】
前端·word
用户982361079027729 分钟前
Vite 项目优化分包填坑之依赖多版本冲突问题深度解析与解决方案
前端
陆枫Larry32 分钟前
深入浅出:CSS 中的“隐形结界”——BFC 详解
前端·css
wuhen_n33 分钟前
JavaScript 深拷贝的完全解决方案
前端·javascript
大时光35 分钟前
gsap 配置解读 --3
前端
2301_7965125240 分钟前
【精通篇】打造React Native鸿蒙跨平台开发高级复合组件库开发系列:Grid 宫格(展示内容或进行页面导航)
javascript·react native·react.js·ecmascript·harmonyos