使用element-ui的Pagination分页的注意事项及说明
更新时间：2024年02月27日 16:42:55 作者：月光下的汉堡包
这篇文章主要介绍了使用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了，结果页面显示还可以。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
vue按需加载组件webpack require.ensure的方法
本篇文章主要介绍了vue按需加载组件webpack require.ensure的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-12-12
这篇文章主要给大家介绍了关于vue项目回到顶部的两种超简单实现方法,页面切换回到顶部是一个很常见的功能,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-10-10
这篇文章主要介绍了Element Tooltip 文字提示的使用示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
这篇文章主要介绍了vue 解决provide和inject响应的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要介绍了Vue渲染过程浅析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-03-03
这篇文章主要介绍了vue百度地图修改折线颜色,添加icon和文字标注方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了Vue form 表单提交+ajax异步请求+分页效果,需要的朋友可以参考下2017-04-04
今天小编就为大家分享一篇vue 中滚动条始终定位在底部的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
在elementui中Notification组件添加点击事件实例
这篇文章主要介绍了在elementui中Notification组件添加点击事件实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
EventBus称为事件总线,当两个组件属于不同的两个组件分支,或者两个组件没有任何联系的时候,不想使用Vuex这样的库来进行数据通信,就可以通过事件总线来进行通信,这篇文章主要给大家介绍了关于Vue eventBus事件总线封装后再用的相关资料,需要的朋友可以参考下2022-06-06
最新评论