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

最新推荐文章于 2024-08-10 07:41:08 发布

月想容

最新推荐文章于 2024-08-10 07:41:08 发布

阅读量7.6k

点赞数

分类专栏：前端文章标签： Vue.js iView Page 假分页 iView分页

本文链接：https://blog.csdn.net/u014418725/article/details/79702001

版权

本文介绍了如何使用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&#