位置: IT常识 - 正文
基于el-table-infinite-scroll实现表格数据无限加载的功能(基于中国国情的中国式现代化具有哪些特色)
发布时间：2024-01-05基于el-table-infinite-scroll实现表格数据无限加载的功能 Element中table组件上拉加载无限滚动前言一、el-table-infinite-scroll插件二、vue项目中使用步骤1.引入插件库2.在el-table中配置使用总结前言
本文链接地址:https://www.jiuchutong.com/zhishi/287332.html
转载请保留说明！
推荐整理分享基于el-table-infinite-scroll实现表格数据无限加载的功能(基于中国国情的中国式现代化具有哪些特色)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:基于stm32的毕业设计,基于个人同意处理个人信息的个人什么撤回其同意,基于stm32的毕业设计,基于网页的客服系统,基于专业性的家校双向互动,需要家长的学校教育参与,基于核心素养下的大单元教学设计,基于核心素养下的大单元教学设计,基于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
有问题欢迎提问和私信，觉得有帮助的话，给个赞或者关注吧~
