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)?