el-table通过无限滚动插件el-table-infinite-scroll实现懒加载

为什么要使用el-table-infinite-scroll

列表数据太多，后端又不好分页，一次性加载大量的数据渲染视图会导致页面卡顿，这时候就需要用到el-table-infinite-scroll来“分批”渲染，如：进入页面先渲染视图可见的10条数据，监听element的滚动条时间，滑到底部时渲染接下来的10条数据，以此类推

步骤：

1. 安装，注意版本号（区分vue2和vue3）
   vue2安装命令：npm install el-table-infinite-scroll@1.0.10

2. 引入插件

全局引用，在main.js文件中引用

import Vue from 'vue';
import elTableInfiniteScroll from 'el-table-infinite-scroll';
 
Vue.use(elTableInfiniteScroll);
1
2
3
4

局部引用

<script>
import elTableInfiniteScroll from 'el-table-infinite-scroll';
export default {
  directives: {
    'el-table-infinite-scroll': elTableInfiniteScroll
  }
}
</script>
1
2
3
4
5
6
7
8

3. 页面使用

<template>
 
  <div>
 
      <el-table    v-el-table-infinite-scroll="loadMore">
         //相关内容
       </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:{
     loadMore() {
        this.isMore = false;  //默认为false
        this.isflag = true;
        if (this.isflag) {
              //判断现有表格数据长度是否和全部数据长度一样，不一样的话就进行截取
           if (this.slice_data_list.length != this.all_data_list.length) {
              this.slice_data_list = this.slice_data_list.concat(this.all_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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

注意：v-el-table-infinite-scroll=“loadMore”，如果写成是 v-el-table-infinite-scroll=“loadMore()”，会导致无限循环至页面崩溃…