基于el-table-infinite-scroll实现表格数据无限加载的功能

Element中table组件上拉加载无限滚动

前言

当表格组件的翻页不想局限通用的Pagination，也可结合无限滚动进行浏览加载数据

一、el-table-infinite-scroll插件

这里使用了

el-table-infinite-scroll

依赖插件，可以结合在element组件的table中使用

el-table-infinite-scroll

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

二、vue项目中使用步骤

1.引入插件库

import ElTableInfiniteScroll from'el-table-infinite-scroll';

2.在el-table中配置使用

当前无限滚动table为

infinite-table-template.vue

子组件，被

index.vue

父组件引用

a、子组件

infinite-table-template.vue

见如下：

<el-tablev-el-table-infinite-scroll="load":data="data"border:infinite-scroll-disabled="disabled"height="412px"></el-table>

<script>exportdefault{directives:{'el-table-infinite-scroll': ElTableInfiniteScroll
    },props:{data:{type: Array,required:true,default(){return[];}},disabled:{type: Boolean,default:true},scrollLoading:{type: Boolean,required:true}},watch:{scrollLoading(val){this.scrollLoading = val;}}}</script>

这里设置table表固定高度412px，当默认高度小于当前高度或上拉动作操作时，即加载

load

方法
此处的

load

方法如下：

load(){if(this.scrollLoading)return;this.$emit('update:scrollLoading',true);this.$emit('loadmore');},

b、父组件

index.vue

见如下：

<Infinite-table-template:data="data":disabled="disabled":scroll-loading.sync="scrollLoading"@loadmore="loadmore"/>

<script>exportdefault{data(){return{disabled:false,page:1,pageSize:10,noMore:false,data:[],scrollLoading:false}},methods:{asyncloadmore(){if(this.disabled)return;const{data:{list}}=awaitgetFlowAppRelational({page_utils:{page_number:this.page,page_size:this.pageSize
                }});this.page++;this.data.push(...JSON.parse(JSON.stringify(list));this.scrollLoading=false;//由于接口无总条数total字段，故使用当前加载接口条数与分页条数作比对，只要条数小于pageSize即是加载完毕if(this.pageSize > list.length){this.disabled =true;this.noMore =true;}}}}</script>

noMore

在这里未作使用，可以用于空数据的展示标识

总结

主要是注意

v-el-table-infinite-scroll

的绑定方法

load

的使用，以及

disabled

和

scrollLoading

有问题欢迎提问和私信，觉得有帮助的话，给个赞或者关注吧~