使用element-ui的Pagination分页的注意事项及说明

element-ui的Pagination分页注意事项

当在一个小弹窗中使用分页功能时，因为弹窗宽度较小，分页长度一度超出弹窗需要调整分页长度。

<el-pagination
  :page-size="20"
  :pager-count="11"
  layout="prev, pager, next"
  :total="1000">
</el-pagination>

发现element中自带可以折叠页码按钮的数量，随意给了一个值（是个偶数）后发现报错了，自习翻看文档发现，当前值只能设置奇数会生效。

于是修改为奇数，问题就解决了

element-ui之el-pagination踩过的坑

由于页面设计得弹窗他宽度不够，还要分成三部分，中间部分是选择人的分页，这就很难办了，把能省的都省了，宽度还是太大，就想着把分页跳转的改少一些，设置可选的跳转为3页，其余省略号显示，我选择了pager-count

如下：

   <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="leftPage.currentPage"
        layout="prev, pager, next,sies, jumper"
        :total="10"
        :pagerCount="2"
      ></el-pagination>

虽然页面显示出来了。。。但是报错了

页面：

 报错：

[Vue warn]: Invalid prop: custom validator check failed for prop "pagerCount".

完了就去查了element的手册

意思就是pager-count只能设置5-21的奇数，无法实现只显示两个页码所以我就给设置了最小值5了，结果页面显示还可以。 

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。