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

  • 前言
  • 一、el-table-infinite-scroll插件
  • 二、vue项目中使用步骤
    • 1.引入插件库
    • 2.在el-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>export default {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>export default {data () {return {disabled: false,page: 1,pageSize: 10,noMore: false,data: [],scrollLoading: false}},methods:{async loadmore() {if (this.disabled) return;const {data: {list}} = await getFlowAppRelational({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

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