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

最新推荐文章于 2024-04-26 11:26:20 发布
最新推荐文章于 2024-04-26 11:26:20 发布
阅读量1.9k 收藏 3
点赞数
文章标签： elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45184807/article/details/118278054
版权

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

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

数据是最后一页的 页码也增加的 视图也渲染了 但是相对应的 分页数据缺没有更新
在这里插入图片描述
在这里插入图片描述
查看工具对比后发现 这里的数据修改是不会更新视图的

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

2 解决办法

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

weixin_45184807
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【疑难杂症】关于element-ui：internalCurrentPage不同步的问题
onionlsh的博客
04-21 720
关于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...
materialui-pagination：Material UI的简单分页组件
02-04
Material UI的简单分页组件。 基于。 安装 $ npm install materialui-pagination 例 //React import React from 'react' ; import PropTypes from 'prop-types' ; import { render } from 'react-dom' ; //...
element组件el-table绑定数据时使用分页组件不能更新改变
ningjiangjinling的博客
05-24 3284
使用条件 使用vue和element组件，el-table和分页组件el-pagination 主要问题 在进行点击跳页查询数据的时候除了点击第一页，一旦点击其他页面el-table的表格数据不会发生变化，但是如果在js中输出查询数据会发现查询出来的数据其实就是我们想要的数据，只是el-table表格界面没有及时渲染，从这可以知道这不是后台的问题，是element组件的bug。 问题解决 把与el...
Element-ui中的分页(pagination)组件的current-page属性不同步更新视图的坑
weixin_43852569的博客
08-28 7366
Element-ui中的分页(pagination)组件的current-page属性不同步更新视图的坑
element 分页切换时:current-page无效 页数不会跟着一起切换
最新发布
红烧咸咸鱼
04-26 346
element 分页切换时:current-page无效 页数不会跟着一起切换
element 修改分页样式_详解vue修改elementUI的分页组件视图没更新问题
weixin_30282917的博客
02-15 490
今天遇到一个小问题平时没留意，el-pagination这个分页组件有一个属性是current-page当前页。今天想在methods里面手动修改他绑定的变量从而达到修改页码的效果，结果发现分页组件视图并没有渲染，还是停留在原本的页码处。然后想了想，想起了.sync这个语法糖，让数据进行双向绑定。直接上修改的代码看看:current-page.sync="currentPage":page-siz...
vue element分页点击不刷新
Hero_rong的博客
01-13 1993
分页效果如上所示 问题： 如上图所示，现在点击到第三页了，然后操作列表里面的删除按钮，数据删除，列表重新加载，此时分页应该回到第一页，但是没有 原因： 用的这个插件，虽然绑定了size-change和 current-change 方法，但是在方法里面并没有实时给页面赋值 ，换言之，这两个方法里面就算是空的，点击上下页也会跳转，但是如果请求完数据想从第三页回到第一页那就不行了，代码会认为还在当前页面， 必须要在这两个方法里面给 currentPage赋值才可以 方法： 解决方法就是如下...
elementui el-pagination分页组件查询的时候当前页不更新
飞翔༒之翼
12-15 813
2.做了一个判断以后就是在点查询按钮的时候让pageNum默认为就好了。1.在加的查询条件中，一般查询按钮是调的列表接口的方法。
Vue el-pagination组件，当前页码（current-page）已经发生改变，但是组件显示没有发生变化
东东东东东辉
06-16 1654
【代码】Vue el-pagination组件，当前页码（current-page）已经发生改变，但是组件显示没有发生变化。
【解决分页el-pagination页面页面不刷新】
limuzhixing的博客
12-15 682
解决分页el-pagination页面页面不刷新
Element-UI踩坑之Pagination组件的使用
10-17
主要介绍了Element-UI踩坑之Pagination组件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
11-29
由于现在公司管理平台主要运用Element UI，索性就结合组件Table 和 Pagination 封装了一个支持页面切换的Table组件，不啰嗦，直接上代码。 2、实现思路 2.1、Element UI 引入(整体引入) main.js // Element UI ...
详解vue修改elementUI的分页组件视图没更新问题
01-22
今天遇到一个小问题平时没留意，el-pagination这个分页组件有一个属性是current-page当前页。 今天想在methods里面手动修改他绑定的变量从而达到修改页码的效果，结果发现分页组件视图并没有渲染，还是停留在原本的...
elementui分页选择器el-pagination的bug，可使用current-page.sync解决
TanMengyi的博客
07-24 7241
参考文章：https://blog.csdn.net/zxwbkzh/article/details/78965309 在某个列表页，我点到第四页，然后选择其中某条数据进行编辑，打开编辑弹窗，编辑点确定后 期望： 列表刷新，展示第一页数据，最下面也展示在第一页 实际效果：数据是刷新到了第一页的数据，但是最下面展示仍然在第四页，如下图： 最开始我想的是直接修改el-pagination的curre...
element-ui 分页器中的 :current-page.sync是干什么的
weixin_66196770的博客
03-06 788
是Element UI中用于实现父子组件间关于当前页码的双向绑定的一种便捷方式，它使得在分页功能中管理当前页码的状态变得更加容易和直观。是用于实现父子组件间关于当前页码的双向绑定的。在Element UI中，
vue3中使用elementui，分页currentpage显示页码不更新视图
weixin_52296487的博客
03-23 2449
vue3中使用elementui，分页组件中，从详情页跳回来，希望能保留分页的当前页码，但是页码改变了，但是却视图没更新，还是初始值1。 尝试过的方法： 1、使用v-if刷新该组件，无效 2、使用nextTick，更新页码，也无效 3、v-if + nextTick ，也无效 4、。。。 最终解决办法 通过使用定时器，晚一点赋值，成功解决问题。 注意事项： 1、赋值要给Number类型 2、延迟赋值 setTimeout(()=>{ panigation.currentPage = Number
vue+element 分页current-page设置页码失效问题
qi琪的专栏
04-29 4013
需求：每经过一次新的查询后，分页页码就要调到第一页。我设置查询后current-page = 1问题： 如果已经跳转到了下一页，在次查询，current-page = 1 会失效。 经查资料： element 对双向绑定支持的不是很好。 使用vue的sync修饰符。 解决方案： 将 current-page换成 current-page.sync [已验证] ...
解决el-pagination组件，current-page 绑定的数据变了，但是页面当前页码并没有变的问题
qiuqiu1894的博客
03-27 6864
亲测有效！ 实现：在每一次切换后将页码置为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" ...
el-pagination的current-page
07-27
el-pagination的current-page是一个属性，用于指定当前所在的页码。 你可以通过设置current-page来控制el-pagination组件显示的当前页码。例如，如果你想显示第3页的内容，你可以将current-page设置为3。 这个属性可以绑定到你的数据模型中，以便在用户切换页码时更新。你可以通过监听current-page的变化来执行相应的操作，比如重新加载数据。 在el-pagination组件中，你可以使用v-model指令来绑定current-page属性，实现双向数据绑定。例如： ```html <el-pagination v-model="currentPage" :total="totalItems" :page-size="pageSize" /> ``` 在上面的示例中，currentPage是你的数据模型中的一个属性，用于存储当前页码。totalItems是总条目数，pageSize是每页显示的条目数。 希望能帮到你！如果有更多问题，请继续提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值