elementui 之el-pagination爬坑，属性pager-count的设定

最新推荐文章于 2025-05-08 09:30:00 发布
最新推荐文章于 2025-05-08 09:30:00 发布
阅读量7.6k 收藏 2
点赞数 1
CC 4.0 BY-SA版权
文章标签： javascript ui python ViewUI
原文链接：http://www.cnblogs.com/wwj007/p/11359811.html
本文探讨了在使用Vue框架的Element UI中，分页组件pager-count属性的限制，即其值只能为5到21之间的奇数，无法实现仅显示两个页码的需求。通过实例代码展示了遇到的问题及错误信息。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

我想设置总页数为10页，页码条总是显示两个页码，其余省略号显示，我选择了pager-count，如下：

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

但是出现报错

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

但是最后发现pager-count只能设置5-21的奇数，无法实现只显示两个页码

转载于:https://www.cnblogs.com/wwj007/p/11359811.html

vue+ElementUI(el-pagination)+express实现分页功能（前后台）
weixin_42088314的博客
12-22 815
前台部分 1、安装elemenUI、axios： npm i element-ui -S npm install axios --save npm install vue-axios --save 在main.js中引用： import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; //样式文件单独引入 Vue.use(ElementUI); #全局注册 import axios from "ax
element-plus分页组件el-pagination的使用
lucky_ly的博客
08-12 1050
分页组件是非常常用的组件之一和表格组件一般成对出现，element-plus 分页组件的组件名是el-pagination。
使用el-pagenation的pagerCount报错（含封装组件代码）
qq_71214810的博客
11-26 1067
总页数，total 和 page-count 设置任意一个就可以达到显示页码的功能；如果要支持 page-sizes 的更改，则需要使用 total 属性。默认情况下，使用pager-count，当总页数超过 7 页时，Pagination 会折叠多余的页码按钮。使用组件时，由于使用了多个table，宽度不够，（虽然页面上的功能能够实现，但是会报红）页码按钮的数量，当总页数超过该值时会折叠。大于等于 5 且小于等于 21 的 奇数。大于等于 5 且小于等于 21 的奇数。完整代码：上方点击下载即可。
Element组件之分页的使用，特别是page-count的坑
热门推荐
rayong的博客
07-23 1万+
首先分页的使用并不难，只要按照官方文档所写即可，但是里面还有有一些需要大家注意的。 话不多说，先上代码 <template> <div class="common_small_page"> <el-pagination small class="pop_small_page" background layout="prev, p
Element Plus分页条（ElPagination）深度解析：提升用户交互的必备技能
最新发布
2401_83194332的博客
05-08 706
开篇导语在Web开发中，分页功能是处理大数据展示的核心需求之一。Element Plus作为一款基于Vue 3的高质量UI框架，其分页组件ElPagination以简洁的API和灵活的配置脱颖而出。本文将深入解析ElPagination的核心用法、实战技巧及常见场景解决方案，助你轻松实现优雅的分页交互。通过npm或yarn安装： 2. 全局引入组件（推荐） 在main.js中： 三、基础用法：快速上手 1. 当前页与每页条数 效果图： ![基础分页条](https://via.plac
elementUI Pagination 分页指定最大页（page-count）
xuelong的博客
10-24 2993
项目中遇到数据量大，查询的字段多，但用户主要使用的是最近的一些数据，1万条以后的数据一般不使用。用户查询时，页码越大，接口需要的时间越久，对用户与服务器都不友好。 为解决该问题，前端分页最多100页（当然也可以自己设置），每页最多100条，这样就可以解决这个问题。
Vue分页控件报错 “pagerCount“
qq_46344419的博客
11-02 3052
Vue分页控件报错 “pagerCount“
vue中elementui使用分页插件Pagination分页问题
ycg的博客
08-26 3983
在使用分页插件时好像遇到两个问题 跳转到最后一页之后删除最后一页所有的，会造成分页处于不正常状态 使用了条件查询好像会造成跳转第二页会出点问题 先看插件的各个参数方便理解： ¶ Attributes 参数说明类型可选值默认值small是否使用小型分页样式boolean—falsebackground是否为分页按钮添加背景色boolean—falsepage-size每页显示条目个数，支持 .sync 修饰符number—10total总条目数number——page-count总页数，total 和 pag
Element-UI 中的el-pagination分页功能
光光探险路
05-18 639
1.功能分页 <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="pageSize" layout="total, prev, pager, next" :total="tota
el-pagination设置pager-count
09-01
你可以使用 Element UI 中的 `<el-pagination>` 组件来设置 `pager-count`，它用于指定总页数。这个属性会影响分页器的显示。 以下是一个示例代码： ```html <!-- 其他内容 --> <el-pagination :pager-...
Vue3+Element Plus+TS 项目利用 el-pagination 封装公共的分页组件
记录学习
03-07 1222
vue3+element plus+ts 项目封装 Pagination 组件
使用element-ui的Pagination 分页的注意事项
CarryNo1的博客
05-28 2695
使用element-ui的Pagination 分页的注意事项 当在一个小弹窗中使用分页功能时，因为弹窗宽度较小，分页长度一度超出弹窗需要调整分页长度。 <el-pagination :page-size="20" :pager-count="11" layout="prev, pager, next" :total="1000"> </el-pagination> 发现element中自带可以折叠页码按钮的数量，随意给了一个值（是个偶数）后发现报错了，自习翻看文档
element的pagenation，使用pager-count报错，Invalid prop: custom validator check failed for prop “pagerCount
ddx2019的博客
07-24 8697
一、问题描述 代码： <el-pagination :background="background" :current-page.sync="currentPage" :page-sizes="pageSizes" :page-size.sync="pageSize" :layout="layout" :total="total" :pager-count="4" v-bind="$attrs"
vue：15 el-pagination 分页
洪君的博客
05-28 1752
分页page组件 组件： 设置layout，表示需要显示的内容，用逗号分隔，布局元素会依次显示。prev表示上一页，next为下一页，pager表示页码列表，除此以外还提供了jumper和total，size和特殊的布局符号->，->后的元素会靠右显示，jumper表示跳页元素，total表示显示页码总数，size用于设置每页显示的页码数量。 <div ...
超好用的element的el-pagination分页组件二次封装-附源码及讲解
wzy_PROTEIN的博客
09-30 1914
前言：在很多后台管理系统开发时总会有很多分页组件的使用，如果我们每次都用elementui官网的el-pagination去写的话，调整所有分页的样式就会很麻烦，而且页面内容也会很累赘繁琐。一般来说listQueryFn函数需要在页面刚加载的时候就调用一下、页面按搜索按钮的时候也要调用一下，再就是用户点击下一页的时候调用。listQueryFn是放前端请求接口的函数，我这里红框只是个示意，用的时候写成自己的接口就行。（我一般都是搭配el-table去使用的，表格组件封装请看我的另一篇帖子）
elment-ui el-pagination 缩减页码的显示值
vanora1111的博客
04-21 3080
根据产品大大的指挥 来修改样式 总结 提示：这里对文章进行总结： 例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。 ...
element-ui 分页组件 动态设置默认页码
10-16 3236
1、在分页组件中加入ref以控制节点 <el-pagination background layout="prev, pager, next" :page-size="10" :current-page="screenList.pageNo" @current-change="handleCurrentChange" :total="total" ref="pagination"> </el-pagination> 2、
vue elementUI el-pagination 分页器的使用细节
qq_41974250的博客
03-23 7099
vue elementUI el-pagination 分页器的使用细节
Vue3实现Pagination分页组件（四）限制最大页码数
u013486889的博客
09-29 1996
在 B 端的 web 开发中，分页组件或者叫分页器，是较为常用的控件之一，通常配合表格或列表，实现数据量大的情况下，分页拆解数据的功能。限制最大页码数，如果你需要查看完整的源代码实现，请访问Pagination 分页组件基础实现分页操作控件自定义控件布局限制最大页码数。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值