element ui 分页(pagination)组件的current-page属性不更新视图的问题

最新推荐文章于 2025-03-31 22:53:19 发布

weixin_45184807

最新推荐文章于 2025-03-31 22:53:19 发布

阅读量2.2k

点赞数

文章标签： elementui

本文链接：https://blog.youkuaiyun.com/weixin_45184807/article/details/118278054

版权

今天在做项目的时候发现:current-page.sync设置了以后分页的数据变化了但是视图缺没有更新

1 这里的数据是最后一页的

数据是最后一页的页码也增加的视图也渲染了但是相对应的分页数据缺没有更新
在这里插入图片描述

查看工具对比后发现这里的数据修改是不会更新视图的

这里是官网对current-page的描述
在这里插入图片描述
由此可见这个属性的值只能是一个简单类型的number值
而我设置的是一个对象的属性
由此可以得出结论current-page只能监听到简单类型的数据

2 解决办法

我们可以再定义一个数据 page 然后让current-page绑定page就可以了
然后让pageParams.page 和 page同步就可以了
在这里插入图片描述
这样问题就解决了

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_45184807

关注关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

【疑难杂症】关于element-ui：internalCurrentPage不同步的问题

onionlsh的博客

04-21

869

关于getValidCurrentPage不同步更新，目前还有相关的issues：https://github.com/elemefe/element/issues/3188#issuecomment-429197298 前置条件如luoye-fe大佬所言：触发条件： 1、total初始化为 0 2、同步操作中改变currentPage的值 3、异步操作中改变total的值 4、分页组件拿到不合法的currentPage，将页数改为 1，之后即使total大于0，也没有重置c...

使用el-pagination，页码（current-page）视图不更新

W________11的博客

08-08

1950

后来发现是，在getList的时候，为了偷懒，在发请求之前把分页器绑定的total属性，重置为0，导致分页器组件崩掉了....在网上搜，发现好多人遇到了类似的问题，但是按照他们解决的方法，家人们，别偷懒...

参与评论您还未登录，请先登录后发表或查看评论

el-pagination警告提示

最新发布

lyd的博客

03-31

688

element分页组件，搜索过后current-page 绑定的数据变了，但是页面当前页码并没有变的问题

L_csdn123的博客

09-13

1475

情景： 1 就是在搜索过后的当前页数据变化了，原本的分页当前页并不会改变，这就会遇见一个问题，首次展示停留在第5页，搜索过后的数据并没有5页，不论前台分页或后台分页，页面都会展示：暂无数据！但其实是有数据的，只是额没有第五页的数据。 2 使用v-if绑定数据，当每次搜索的时候就注销掉前一个分页Dom，画面刷新完毕后，渲染一个同样的分页，重新渲染必须放到$nextTick中，这样在使用分页就不会出现问题了。 <el-pagination v-if="pageshow" @current-c

vue3中使用elementui，分页currentpage显示页码不更新视图

weixin_52296487的博客

03-23

2720

vue3中使用elementui，分页组件中，从详情页跳回来，希望能保留分页的当前页码，但是页码改变了，但是却视图没更新，还是初始值1。尝试过的方法： 1、使用v-if刷新该组件，无效 2、使用nextTick，更新页码，也无效 3、v-if + nextTick ，也无效 4、。。。最终解决办法通过使用定时器，晚一点赋值，成功解决问题。注意事项： 1、赋值要给Number类型 2、延迟赋值 setTimeout(()=>{ panigation.currentPage = Number

elementui中的pagination中的current-page中的.sync不生效问题

weixin_63132926的博客

04-16

749

问题：当在页面A中切换页面到非第一页时，点击文件夹进入文件夹页面，当前视频卡片页面的页数是第一页，这里有一个按钮，返回上一页按钮，当点击返回上一页时，回到A页面，此时A页面上的页面页数也应该是进入视频卡片页面之前的页面，比如进去之前pagenum=3，此时出来也应该是3，但此时的问题是：数据展示的是第三页的，但分页组件选中的页面确实第一页，使用current-page.sync也不生效。这里是把进去之前的页面的分页数据进行存储。下面更新了，但是页码没切换。然后total又异步获取了。导致下面的就没有渲染。

Element-ui中的分页(pagination)组件的current-page属性不同步更新视图的坑

weixin_43852569的博客

08-28

8351

Element-ui中的分页(pagination)组件的current-page属性不同步更新视图的坑

element-UI 分页器Bug，切换页码，页码改变但是页码高亮未变化

smouns_的博客

04-13

2542

Element-UI提供了分页器的两个方法，handleSizeChange和handleCurrentChange，然而在实际使用中，却发现再切换页面展示数量的时候，会出现一些BUG，页面刷新了，高亮页码却还是上次选择的页面。可以用以下方法解决；在你的项目页面，你点击了分页按钮查看了后面页面的数据，然后变更了查询条件，查询了新的数据时，分页显示器上面还停留在上一次翻页的记录上面，而没有重置到第一页。1.最简单粗暴的手法，就是利用DOM渲染，刷新整个组件，这样，就模拟恢复到第一页的状态。

vue element分页点击不刷新

Hero_rong的博客

01-13

2162

分页效果如上所示问题：如上图所示，现在点击到第三页了，然后操作列表里面的删除按钮，数据删除，列表重新加载，此时分页应该回到第一页，但是没有原因：用的这个插件，虽然绑定了size-change和 current-change 方法，但是在方法里面并没有实时给页面赋值，换言之，这两个方法里面就算是空的，点击上下页也会跳转，但是如果请求完数据想从第三页回到第一页那就不行了，代码会认为还在当前页面，必须要在这两个方法里面给 currentPage赋值才可以方法：解决方法就是如下...

Vue+elementui------ el-pagination分页组件查询的时候当前页不更新----项目积累

飞翔༒之翼

12-15

1237

2.做了一个判断以后就是在点查询按钮的时候让pageNum默认为就好了。1.在加的查询条件中，一般查询按钮是调的列表接口的方法。

elementUI分页中改变current-page绑定的值无效问题的解决

m0_65651745的博客

04-06

1113

代码示例：在Element UI的<el-pagination>分页组件中，可以通过:current-page.sync="pageNum"的形式，将父组件的pageNum变量与子组件的当前页码进行双向绑定。通过使用current-page.sync，可以实现当用户在分页组件中切换页码时，父组件中的对应变量也会得到更新。综上所述，current-page.sync是Element UI中用于实现父子组件间关于当前页码的双向绑定的一种便捷方式，它使得在分页功能中管理当前页码的状态变得更加容易和直观。

Vue el-pagination组件，当前页码（current-page）已经发生改变，但是组件显示没有发生变化

东东东东东辉

06-16

2174

【代码】Vue el-pagination组件，当前页码（current-page）已经发生改变，但是组件显示没有发生变化。

Element-pagination分页组件修改current-page属性，不能正确渲染当前页码的问题（从组件源码查找问题）

伟深么的博客

05-18

4379

需求：使用elementUI的分页组件pagination，要实现从页面跳转到列表页时设置当前页码current-page 问题：设置current-page成功，请求接口携带参数正确，pagination组件上页码显示不正确，始终显示为第一页解决方式： 1、在请求数据后再设置current-page （推荐） ```javascript  await getList() // 此时的total应该不为0 this.currentPage = 要设置的页码 `

【解决分页el-pagination页面页面不刷新】

limuzhixing的博客

12-15

834

解决分页el-pagination页面页面不刷新

elementui分页选择器el-pagination的bug，可使用current-page.sync解决

TanMengyi的博客

07-24

7469

参考文章：https://blog.youkuaiyun.com/zxwbkzh/article/details/78965309 在某个列表页，我点到第四页，然后选择其中某条数据进行编辑，打开编辑弹窗，编辑点确定后期望：列表刷新，展示第一页数据，最下面也展示在第一页实际效果：数据是刷新到了第一页的数据，但是最下面展示仍然在第四页，如下图：最开始我想的是直接修改el-pagination的curre...

element-ui 分页器中的 :current-page.sync是干什么的

weixin_66196770的博客

03-06

1632

是Element UI中用于实现父子组件间关于当前页码的双向绑定的一种便捷方式，它使得在分页功能中管理当前页码的状态变得更加容易和直观。是用于实现父子组件间关于当前页码的双向绑定的。在Element UI中，

vue+element 分页current-page设置页码失效问题

qi琪的专栏

04-29

4221

需求：每经过一次新的查询后，分页页码就要调到第一页。我设置查询后current-page = 1问题：如果已经跳转到了下一页，在次查询，current-page = 1 会失效。经查资料： element 对双向绑定支持的不是很好。使用vue的sync修饰符。解决方案：将 current-page换成 current-page.sync [已验证] ...

解决el-pagination组件，current-page 绑定的数据变了，但是页面当前页码并没有变的问题

qiuqiu1894的博客

03-27

7674

亲测有效！实现：在每一次切换后将页码置为1；在当前页自由切换页码。使用:current-page.sync <el-pagination class="tc mg" :current-page.sync="filter.page" :page-sizes="[10, 20, 100, 200]" :page-size="filter.per_page" ...

element-ui分页展示6条

01-10

### 配置 Element UI 的 Pagination 组件为了使 `el-pagination` 每次仅展示6条数据，在定义分页组件时需指定属性 `page-size` 并将其设为6。此参数决定了每一页显示的数据量[^1]。 ```html <template> <div class="pagination-container">  <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalRecords"> </el-pagination> </div> </template> <script> export default { data() { return { currentPage: 1, pageSize: 6, // 设置每页显示数量为6条 totalRecords: 0 // 总记录数 }; }, methods: { handleSizeChange(val) { console.log(`每页 ${val} 条`); this.pageSize = val; this.fetchData(); }, handleCurrentChange(val) { console.log(`当前页: ${val}`); this.currentPage = val; this.fetchData(); }, fetchData() { // 这里应该放置获取数据逻辑，比如调用API接口请求服务器端数据 // 假设已成功获得数据并更新到表格或其他容器内 } } }; </script> ``` 上述代码片段展示了如何通过设置 `:page-size="pageSize"` 和初始化 `data()` 函数内的 `pageSize` 变量值为6来达成目标。此外还包含了处理页面大小更改 (`handleSizeChange`) 和当前页码变动 (`handleCurrentChange`) 的方法，以及用于模拟实际应用中可能存在的异步加载操作的 `fetchData` 方法[^3]。当遇到分页组件在特定情况下无法正常工作的问题时，可以尝试重置当前页至第一页，并刷新视图以确保分页器能够正确响应状态的变化[^4]。