Vue.js iView Page分页组件之假分页

本文介绍了如何使用Vue.js的iView Page组件实现假分页功能。在created阶段,通过axios获取所有数据并存储为全集A,前10条数据作为初始分页子集B。当点击分页按钮时,onChange函数根据当前页码更新子集B,确保正确显示分页内容。特别注意,当数据条数非整十时,避免因索引计算错误导致最后一页无法加载。
摘要由CSDN通过智能技术生成

问题:

        使用iView的Page组件实现分页效果,从现实角度来说,肯定是真分页才有现实的价值,但是假分页也很重要,是一个学习的过程。(ps:真分页就是每次前段请求,后端拿到请求去调用接口查询数据库。假分页就是前段一次请求,后端一次性查询所有或者固定页数。之后前段的请求全从之前拿到的里面分批给前段


组件:

        组件Table和组件Page

                <!-- 数据表格 -->
		<Table stripe :loading="loading" border :columns="listcolumns" :data="pagerData.data" style="overflow-y: hidden;max-height: 522px;"></Table>
		
		<!-- 分页栏 -->
		<div class="page_div&#
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值