1、官方的API文档说明
选用的分页组件是电梯快速跳转的这一种，大致效果是左边所展示的样子，那么具体如何使用呢？
API
官方的API文档
2、分页组件的使用
第一步，在main.js文件中引入iview的组件进去
main.js
第二步，在需要引入的vue文件中引入组件，我这边的是jdtable.vue公共文件里
jdtable.vue
1、:total是Page属性，为总条数，我这边是通过父子组件传值，传的是totla的总条数给的子组件。
2、this.pn 是Page属性，为当前页数,我在data选项中默认设置的为1，默认进入显示第一页的数据内容。
3、this.ps 是Page属性，为当前显示数据条数
4、show-elevator对应图中跳至多少页
5、show-total对用图中共多少条数
图示效果
再说说切换页码的事件的处理，官方的API文档给出的是两个事件去处理。
-
on-change是页码改变的回调，返回改变后的页码
-
on-page-size-change是切换每页条数时的回调，返回切换后的每页条数
子组件jdtable.vue代码
通过 @on-change="changePage" 给分页组件添加页码的回调函数，
子组件jdtable.vue代码
通过父子组件的传值，将changePage的index页码值通过事件分发出去，并在父组件添加changePage回调去接受这个index的页码值
父组件account.vue代码
在父组件中添加changePage的回调，用于去接受改变的页码值index
父组件account.vue代码
在changePage中给 this.pn 进行赋值，然后通过后台调取接口数据，将改变后的页码值传给后台，再通过response响应回来的数据去渲染到视图中去，这样响应回来的就是改变后的页码值的数据条数了。
最后，on-page-size-change回调函数同理的方法去实现即可。
3、注意点
在使用分页组件中，可能会遇到如下的情况，我们使用修改了一条页码的条数值，但是并未给我们进行分页，比如：总共15条数据，我们处理成每页展示6条，那么按理应该是分了3页才对，2页肯定是放不下的，当我们只对 this.ps 修改为6时，展示的结果如下：
图示
怎么只显示了两页呢，通过代码我们是可以看出来 ps 的每页的条数值是已经修改了的，那么原因就出在分页组件Page中，下面是官方API中的一个属性， page-size，我们通过接口向后台告知了详细的分页数据，比如 一页多少条，多少页，数据的总条数，等等信息，但是前端的page组件是没有得知这一情况的
官方API文档
下面我们加上这属性看看：
代码
pageSize是从父组件传过来的 this.ps的值，这样再打开页面看看效果如何？
结果
因此，这一问题得到了解决，我们通过 page-size 和后台的ps直接挂钩，这样就处理了分页数不对的问题。
最后编辑于：2025-06-05 21:01:38
© 著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务
喜欢的朋友记得点赞、收藏、关注哦！！！