el-table实现懒加载（el-table-infinite-scroll）

爱写代码的派大星2023-08-20 10:41

2023.8.15今天我学习了用el-table对大量的数据进行懒加载。

效果如下：

1.首先安装：

复制代码

npm install --save el-table-infinite-scroll@2

2.全局引入：

javascript 复制代码

import ElTableInfiniteScroll from "el-table-infinite-scroll";

// 懒加载
Vue.directive("el-table-infinite-scroll", ElTableInfiniteScroll);

3.页面使用：

javascript 复制代码

<template>

  <div>

      <el-table    v-el-table-infinite-scroll="load">
         //相关内容
       </el-table>

      //提示框内容
      <el-alert v-if="isflag" title="正在努力加载中..." type="success" center :closable="false" show-icon/>
      <el-alert v-if="isMore" title="没有更多啦！" type="warning" center show-icon/>

  </div>

</template>

<script>
 export default{
   data(){
     return{
       start: 10,//截取数据的开始位置
       end: 20,//截取数据的结束位置
       isflag: false,//显示加载中提示的动画
       isMore: false,//显示没有过多提示的动画
     },
   methods:{
     load() {
        this.isMore = false;//默认为false
        this.isflag = true;
        if (this.isflag) {
              //判断现有表格数据长度是否和全部数据长度一样，不一样的话就进行截取
           if (this.slice_bed_data_list.length != this.all_bed_data_list.length) {
              this.slice_bed_data_list = 
            this.slice_bed_data_list.concat(this.all_bed_data_list.slice(this.start, 
               this.end));
             //每次截取十条数据，截取位置每次都增加10，也可以采用每次截取前十条数据然后删除总数组的前十条数据，这样每次截取的数据就是最新的十条数据。
              this.start = this.start + 10
              this.end = this.end + 10
        } else {
          setTimeout(() => {
            this.isMore = true;
            setTimeout(() => {
              this.isMore = false;
            }, 2000);
          }, 2000);//显示没有过多提示的效果，2秒后消失
        }
        setTimeout(() => {
          this.isflag = false
          this.isMore = false
        }, 1000)//所有提示都消失
      }
    },
  }
 }
 }

</script>

如果大家有不懂的地方可以参考：

1.vue---在el-table上实现懒加载效果_列表懒加载插件_迷路小灰灰的博客-CSDN博客

2.el-table-infinite-scroll - npm (npmjs.com)