element-ui中的el-pagination，页码一直为1的问题

最新推荐文章于 2024-08-26 15:17:01 发布
最新推荐文章于 2024-08-26 15:17:01 发布
阅读量1.9k 收藏
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Z_CiXi/article/details/131550674
版权
在使用Element-UI的el-pagination组件时，遇到页码始终显示为1的问题。原因是误将`page-sizes`用于设置每页数据量，而忽略了必需的`page-size`属性。正确做法是使用`page-size`来指定每页数据数量，而`page-sizes`用于提供每页显示个数的选择。参考相关文章和文档可以解决此类错误。

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

描述一下问题：在使用element-ui的分页，明明设置好了，每页的数据，但是页码一直是1，很头大。大家可以参考一下这篇文章，在简单的分页来看，也是需要同学仔细去写代码的，比如单词，表单符号等，都是会造成错误的。

 

这是一位同学的错误，他并没有写page-size而是直接用page-sizes，问题就出现了，他的页码一直显示为1，不管去怎么调整都是1。最后将其改为page-size问题得以解决。

大家可以看看文档，page-size是必须的，page-sizes是每页显示个数选择器的设置，如果你没有用page-size直接用page-sizes的话，就会触发这种错误。

 

大家可以参考一下(9条消息) element-ui中的el-pagination，页码一直为1_el-pagination只有1也_龙仔CLL的博客-CSDN博客icon-default.png?t=N5K3https://blog.csdn.net/weixin_42304966/article/details/123702795?spm=1001.2101.3001.6650.3&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-3-123702795-blog-121923172.235%5Ev38%5Epc_relevant_anti_t3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-3-123702795-blog-121923172.235%5Ev38%5Epc_relevant_anti_t3&utm_relevant_index=4

TD退订
关注
Element-UI 中的el-pagination分页功能
光光探险路
05-18 622
1.功能分页 <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="pageSize" layout="total, prev, pager, next" :total="tota
vue2、element-UI二次封装Pagination 分页组件
weixin_70397152的博客
02-12 291
基于vue2和elementui二次封装分页组件
elementui里分页组件，点击换页默认跳回第一页的问题
weixin_47151361的博客
06-06 3753
elementui里分页组件，点击换页默认跳回第一页的问题
el-Pagination 分页 页码一直是1
weixin_47303966的博客
12-14 2592
el-Pagination 分页 页码一直是1 如果你设置了一页显示几条但是页码永远是1 那么就跟你获取到的总条数有关总条数需要后端反给你如果不反的话那么你的分页的页面永远就是1没有下一个页码了 <el-pagination @size-change=“handleSizeChange” @current-change=“handleCurrentChange” :current-page=“currentPage4” :page-sizes="[100, 200, 300, 400]" :page-
el-pagination jumper 分页页码数值始终为1的问题处理
Bigger_Mountain的博客
08-26 357
el-pagination中对total清零导致页面始终为1。
element-ui中的el-pagination，页码一直为1
weixin_42304966的博客
03-24 2630
描述问题： <el-pagination :page-sizes="[20, 40, 60, 80]" :page-size="followParams.limit" :current-page="followParams.page" layout="total, sizes, prev, pager, next, jumper" :total="followTotal" @size-change="handleSizeChangeModal" @current-change="pageChan
＜el-pagination＞初期化显示currentPage一直是1的问题
weixin_47372236的博客
01-15 1822
网上有相应的解决方案，点击这里 看了上面的文章发现一个问题就是el-pagination初期化的时候，是不显示的。所以说一下下面的解决方案。 <el-pagination @current-change="页码变更事件" layout="total, sizes, prev, pager, next, jumper" @size-change="页面条数变更事件" :page-sizes="[15, 30, 45]" :current-page.sync="currentPage" :page-siz
element plus 或者:current-page或者el-pagination无法分页，始终在第一页
weixin_45917610的博客
10-27 4066
我用的是vue3+element plus，当然原理也差不多 原因是：:current-page不是很支持双向数据绑定 所以是应该这样的：在 把 :current-page变成 v-model:current-page就可以了 要写好分页可以参考这个更加详细（受此启发）：评论区有大神。 1、链接: https://blog.csdn.net/qq_33692349/article/details/91490480?ops_request_misc=%257B%2522request%255Fid%252
Element-UI踩坑之Pagination组件的使用
10-17
在使用Element-UI提供的Pagination组件时，用户可能会遇到一些常见的问题或者说是“坑”，这些通常与分页组件的使用逻辑和数据处理有关。以下是对Element-UI Pagination组件使用的深入解读。 首先，Pagination组件...
【Vue2 + ElementUI】分页el-pagination 封装成公用组件
01-25
在Vue2框架中，ElementUI是一个非常流行的UI组件库，提供了丰富的组件，如表格、按钮、弹窗等，其中el-pagination是用于实现分页功能的组件。为了在多个页面上复用并统一分页样式，我们可以将其封装为一个公用组件。...
Element-UI自学实践（一）
weixin_40017062的博客
08-13 455
Element-UI自学实践
el-pagination 分页器，当total为0时，设置pageIndex大于1，请求数据获取到总total后，分页器页码依旧展示为1
weixin_45549481的博客
01-03 870
查询表格，初始化时，pageIndex默认为1，后面因为查询条件数据缓存，pageIndex设置为了4，但是pagenation组件使用都是展示1，页面的数据确实是第4页的数据；组件外部的数据没有问题，系el-pagenation组件内部的问题。附上BasePagenation.vue组件代码。组件内外的数据没有同步。
vue 翻页每次从1开始_关于vue+element-ui项目的分页，返回默认显示第一页的问题解决...
weixin_39617685的博客
12-20 968
问题描述当前页面如下：然后点击页码跳到第3页，然后在第三页点击页面链接跳转到新的页面然后在新页面点击返回按钮，返回到当前页，结果页面分页显示第一页，对应页面内容也是第一页期望效果从新页面返回的时候，页码和页面内容仍旧保持在跳转离开前的样子。解决办法1.利用localStorage或者sessionStorage将跳转页面前的currentPage存储起来，然后，再次返回当前页的时候，在create...
使用el-pagination，页码（current-page）视图不更新
W________11的博客
08-08 1931
后来发现是，在getList的时候，为了偷懒，在发请求之前把分页器绑定的total属性，重置为0，导致分页器组件崩掉了....在网上搜，发现好多人遇到了类似的问题，但是按照他们解决的方法，家人们，别偷懒...
element-plus分页 项目中 列表页 页码总是回到1~
Yjx的博客
10-07 619
原因就是我列表页用了v-if重新渲染导致页码总是回到1，采用v-show方式即可。
Element-pagination分页组件修改current-page属性，不能正确渲染当前页码的问题（从组件源码查找问题）
伟深么的博客
05-18 4357
需求：使用elementUI的分页组件pagination，要实现从页面跳转到列表页时设置当前页码current-page 问题：设置current-page成功，请求接口携带参数正确，pagination组件上页码显示不正确，始终显示为第一页 解决方式： 1、在请求数据后再设置current-page （推荐） ```javascript <!-- methods --> await getList() // 此时的total应该不为0 this.currentPage = 要设置的页码 `
关于element-ui分页器 设置current-page为初始化值为 1 时的问题
weixin_43541909的博客
11-04 2786
分页的代码逻辑是当 total > pageSize 才会有后面的第 2，3，4，5…等等页面出现。我的需求是页码分页会携带在 url 中，每次页面跳转就相当于刷新页面，所以，会有一个初始化 pageNum 代码操作，但是，由于数据未请求回来之前，数据里因为是路由的改变，相当于页面的刷新，total被初始化为了0，所以就会遇到一个无论怎么跳转，当前页码数一直处于1的状态 。所以我想到了一个简单粗暴的方案，就是初始时拿到 Url 中的 pageNum,数据请求回来之后，再次将 pageNum 赋值给 c
关于vue+element-ui项目的分页，返回默认显示第一页的问题解决
七色花
10-22 1895
原文链接：https://blog.csdn.net/StephenO_o/article/details/84234916 <div class="pagePagination"> <el-pagination @current-change="handleCurrentChange" :page-size="listPageEvery" layout="prev, pager, next"
element-ui Pagination分页只保留上一页下一页
一只没有脚的鸟
11-01 1857
有时数据量太大，比如日志数据没必要查看很久之前的，所以把页数屏蔽，不给系统造成卡顿，最简单的方式就是隐藏总条数、页数。
element-ui 中table序号
最新发布
03-17
### 实现 Element UI Table 自定义序号列 在 Vue 和 Element-UI 开发中，`el-table` 是常用的表格组件之一。为了实现自定义序号列的功能，可以通过 `type="index"` 属性来快速生成默认的序号列[^1]。然而，默认情况下，当数据分页时，每一页的序号会重新从 1 开始计数。如果希望序号能够跨页连续显示，则需要通过 `index` 方法来自定义序号逻辑。 以下是具体的实现方法： #### 使用 `type="index"` 默认方式 最简单的实现方式是在 `<el-table>` 中添加一个带有 `type="index"` 的列： ```html <el-table :data="tableData"> <el-table-column label="序号" type="index" width="50"></el-table-column> </el-table> ``` 这种方式会在每一行前自动增加序号，但其缺点在于无法处理分页后的连续编号需求[^2]。 --- #### 跨页连续序号的解决方案 要实现跨页连续序号，可以利用 `index` 属性绑定的方法函数计算当前行的真实索引位置。具体代码如下： ```html <template> <div> <el-table :data="tableData" @current-change="handleCurrentChange"> <!-- 序号列 --> <el-table-column label="序号" width="80"> <template slot-scope="scope"> {{ (currentPage - 1) * pageSize + scope.$index + 1 }} </template> </el-table-column> <!-- 其他列 --> <el-table-column prop="name" label="名称" width="120"></el-table-column> <el-table-column prop="age" label="年龄" width="100"></el-table-column> </el-table> <!-- 分页器 --> <el-pagination background layout="prev, pager, next" :total="total" :page-size="pageSize" @current-change="handlePageChange" ></el-pagination> </div> </template> <script> export default { data() { return { currentPage: 1, pageSize: 10, total: 50, tableData: [ { name: '张三', age: 20 }, { name: '李四', age: 22 }, // 更多数据... ], }; }, methods: { handlePageChange(page) { this.currentPage = page; // 假设此处调用接口获取新页面的数据并更新到 tableData }, }, }; </script> ``` 上述代码的关键部分是通过 `(currentPage - 1) * pageSize + scope.$index + 1` 动态计算真实序号[^3]。其中： - `currentPage` 表示当前页码； - `pageSize` 表示每页显示条目数量； - `scope.$index` 获取当前行在本页中的索引。 这种方法确保即使切换分页，序号也能保持连贯性。 --- ### 封装动态表格组件 对于更复杂的场景，比如需要支持表头定制化的动态表格，可以考虑对 `el-table` 进行二次封装。以下是一个简单示例： ```javascript // 子组件：DynamicTable.vue <template> <el-table :data="tableData"> <el-table-column v-if="showIndexColumn" label="序号" width="80"> <template slot-scope="scope"> {{ (pagination.currentPage - 1) * pagination.pageSize + scope.$index + 1 }} </template> </el-table-column> <el-table-column v-for="(column, index) in columns" :key="index" :prop="column.prop" :label="column.label" :width="column.width || ''" > </el-table-column> </el-table> </template> <script> export default { props: { tableData: Array, columns: Array, showIndexColumn: Boolean, pagination: Object, }, }; </script> ``` 父组件使用此子组件时只需传递配置参数即可完成初始化。 --- ### 总结 以上介绍了三种实现 Element-UI 表格序号的方式： 1. 利用 `type="index"` 提供基础功能。 2. 结合分页器手动计算跨页连续序号。 3. 对表格进行二次封装以满足复杂业务需求。 这些方案可以根据实际项目的需求灵活选用。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值