2023.8.15今天我學(xué)習(xí)了用el-table對(duì)大量的數(shù)據(jù)進(jìn)行懶加載。
效果如下：
?
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">
//相關(guān)內(nèi)容
</el-table>
//提示框內(nèi)容
<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,//截取數(shù)據(jù)的開始位置
end: 20,//截取數(shù)據(jù)的結(jié)束位置
isflag: false,//顯示加載中提示的動(dòng)畫
isMore: false,//顯示沒有過多提示的動(dòng)畫
},
methods:{
load() {
this.isMore = false;//默認(rèn)為false
this.isflag = true;
if (this.isflag) {
//判斷現(xiàn)有表格數(shù)據(jù)長(zhǎng)度是否和全部數(shù)據(jù)長(zhǎng)度一樣，不一樣的話就進(jìn)行截取
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));
//每次截取十條數(shù)據(jù)，截取位置每次都增加10，也可以采用每次截取前十條數(shù)據(jù)然后刪除總數(shù)組的前十條數(shù)據(jù)，這樣每次截取的數(shù)據(jù)就是最新的十條數(shù)據(jù)。
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上實(shí)現(xiàn)懶加載效果_列表懶加載插件_迷路小灰灰的博客-CSDN博客文章來源：http://www.zghlxwxcb.cn/news/detail-650910.html
2.el-table-infinite-scroll - npm (npmjs.com)?文章來源地址http://www.zghlxwxcb.cn/news/detail-650910.html
到了這里，關(guān)于el-table實(shí)現(xiàn)懶加載（el-table-infinite-scroll）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
