使用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的三种图片引入方式代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-11-11
这篇文章主要介绍了vue项目引入本地bootstrap不生效问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了vue实现锚点跳转scrollIntoView()使用案例，文中结合实例代码介绍了vue锚点跳转的三种方式(页内跳转，跨页跳转，函数跳转),需要的朋友可以参考下2023-07-07
这篇文章主要介绍了vue-cli3环境变量与分环境打包的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
这篇文章主要给大家总结介绍了关于vue.js集成echarts遇到的一些问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
这篇文章主要介绍了vue中defineProperty和Proxy的区别详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-11-11
这篇文章主要介绍了vue日历/日程提醒/html5本地缓存功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-09-09
桑基图是一种用于直观显示流向数据的可视化工具,特别适合展示复杂的网络关系和资源流动,在前端项目中,通过结合 Vue 3 和 ECharts,可以快速实现交互性强、样式美观的桑基图,本文将通过完整的代码示例,带你一步步完成一个桑基图的实现,需要的朋友可以参考下2025-01-01
这篇文章主要介绍了Vue实现鼠标经过文字显示悬浮框效果，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-10-10
本文通过实例给大家详细介绍了Vuejs与form元素的相关知识，非常不错，具有参考借鉴价值,需要的朋友可以参考下2016-09-09
最新评论