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

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

效果如下：

 

1.首先安装：
 

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

2.全局引入：

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

3.页面使用：

<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;//默认为falsethis.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 + 10this.end = this.end + 10} else {setTimeout(() => {this.isMore = true;setTimeout(() => {this.isMore = false;}, 2000);}, 2000);//显示没有过多提示的效果，2秒后消失}setTimeout(() => {this.isflag = falsethis.isMore = false}, 1000)//所有提示都消失}},}}}</script>

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

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

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