标签：10 Pagination pageSize element current ui total page size
element-ui Pagination 分页组件遇到的Bug
主要参数介绍
以组件完整功能为例需要配置的参数为current-page、page-sizes、page-size、total：
- current-page，文档所指为当前页数；显示当前数据所拥有页数
- page-sizes，文档所指为每页显示个数选择器的选项设置；对当前页数据显示个数进行配置（以数组形式进行配置，例：[10, 20, 30, 40]）
- page-size，文档所指为每页显示条目个数，支持 .sync 修饰符；限制每页显示的条数
- total，文档所指为总条目数，显示接口返回的数据总条目数
注意点
- total不要与page-size 混淆，在没有指定current-page的情况下组件自动依据total(数据总条目数)进行分页(前提得指定page-size并且指定数量不能大于total)，如果混淆会导致没有进行分页或者数据总条目数不准确
- 可通过current-page指定所拥有得页数，经测试后发现指定了total、page-size后，组件自动依据（主注意点1）进行分页如下图1-1、1-2(效果图)所示
图种可以看到指定了current-page为4，但效果图显示只有两页（我一般会把current-page去掉）
- 主要事件（@size-change、@current-change）
3-1、size-change
文档说明为：pageSize 改变时会触发；回调参数为：每页条数。
通常请求接口需要带pageNum（页码）、pageSize（每页数据），不带参数通常会默认为查全部，但是该方法的根据条数进行变化，所以只能修改pageSize参数，pageNum不能进行修改；同时得考虑：pageSize修改了，current-page（总页数）需不需要改变呢？
如何按照第二点不设置current-page参数，只设置total、page-size得情况，按照此情况就不需要再次指定total、current-page，total参数会根据条目数进行分页如图1-3、1-4、1-5、1-6（两个情况1、设置pageSize小于total，2、设置pageSize大于等于total）
3-2、current-change,
文档说明为：currentPage 改变时会触发；回调参数为：当前页。
与3-1雷同，只能修改pageNum参数，这个也得考虑page-size（每页显示条目个数）的情况，pageSize参数需不需要给一个数值呢？
测试如下图：1-7、1-8、1-9（pageSize参数设置为10，page-size参数设置为10，每页只展示10个数据）；1-10、1-11(pageSize参数设置为20)
图10-11设置为20条数据，大于total所以只能显示在一页，没有分页效果
图7-9设置为10条数据，小于total所以可以显示多页
个人建议：无论是size-change、current-change都将pageSize指定为固定的数值，为避免不必要的bug出现
标签：10,Pagination,pageSize,element,current,ui,total,page,size 来源： https://blog.csdn.net/mrliucx/article/details/112280090
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。