el-table横向滚动条（基于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二 、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
有问题欢迎提问和私信 ，觉得有帮助的话 ，给个赞或者关注吧~
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！