iview组件库：关于分页组件的使用与注意点

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文档给出的是两个事件去处理。

1.  on-change是页码改变的回调，返回改变后的页码

2.  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直接挂钩，这样就处理了分页数不对的问题。