监听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;
        });
相关推荐
英勇无比的消炎药11 分钟前
一站式汇总TinyVue工具案例与真实落地经验
vue.js·前端框架
xiaofeichaichai16 分钟前
前端安全 XSS 与 CSRF
前端·安全·xss
JS菌24 分钟前
Skills 动态加载系统:让 AI Agent 按需获取领域知识
前端·人工智能·后端
weedsfly26 分钟前
Sass 代码复用完全指南:从变量到模块化
前端
张拭心31 分钟前
Android 17 新特性:后台音频交互限制加强
android·前端
张拭心40 分钟前
Android 17 新特性:ProfilingManager 新触发器
android·前端
黄敬峰1 小时前
从 XMLHttpRequest 到 JSON 模拟:打通前后端通信的任督二脉
javascript
weixin_471383031 小时前
Taro-03-页面生命周期
前端·javascript·taro
张拭心1 小时前
Android 17 新特性:MessageQueue 无锁实现
android·前端