Element中table组件上拉加载无限滚动
前言
当表格组件的翻页不想局限通用的Pagination，也可结合无限滚动进行浏览加载数据
一、el-table-infinite-scroll插件
这里使用了el-table-infinite-scroll依赖插件，可以结合在element组件的table中使用
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-table
v-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
有问题欢迎提问和私信，觉得有帮助的话，给个赞或者关注吧~