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

---

前言

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

---

一、el-table-infinite-scroll插件

这里使用了el-table-infinite-scroll依赖插件，可以结合在element组件的table中使用

el-table-infinite-scroll

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

二、vue项目中使用步骤

1.引入插件库

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

2.在el-table中配置使用

当前无限滚动table为infinite-table-template.vue子组件，被index.vue父组件引用

a、子组件infinite-table-template.vue见如下：

<el-table
	v-el-table-infinite-scroll="load"
	:data="data"
	border
	:infinite-scroll-disabled="disabled"
	height="412px">
el-table>
1
2
3
4
5
6
7

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

这里设置table表固定高度412px，当默认高度小于当前高度或上拉动作操作时，即加载load方法
此处的load方法如下：

load() {
	  if (this.scrollLoading) return;
	  this.$emit('update:scrollLoading', true);
	  this.$emit('loadmore');
},
1
2
3
4
5

b、父组件index.vue见如下：

	<Infinite-table-template
		:data="data"
		:disabled="disabled"
		:scroll-loading.sync="scrollLoading"
		@loadmore="loadmore"
	/>
1
2
3
4
5
6

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

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

---

总结

主要是注意v-el-table-infinite-scroll的绑定方法load的使用，以及disabled和scrollLoading

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