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;//默认为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博客文章来源:https://www.toymoban.com/news/detail-650910.html
2.el-table-infinite-scroll - npm (npmjs.com) 文章来源地址https://www.toymoban.com/news/detail-650910.html
到了这里,关于el-table实现懒加载(el-table-infinite-scroll)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!