el-pagination 页码 更新问题

本文介绍了一种解决Element UI分页组件在换页时页码未正确激活的问题,通过使用v-if指令控制渲染过程,实现了页码的正确显示。此方法在查询方法中控制paginationShow的值,确保接口请求完毕后正确更新页码。

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

element 分页组件在 换页 的时候,画面数据正确,但 页码却没被激活, 即 还处于换页之前的页码。

如图
在这里插入图片描述
百度搜索,尝试了很多种方案,比如 加上current-page.sync 修饰、结合localStorage利用 created() beforeUpdate () beforeDestroy ()方法,重置current-page属性值…

不知道是我没写对还是其他原因,反正 最后都没成功。

偶然 尝试了一种新的方式 v-if ,发现有用,拿来分享。

在 el-pagination 中加 v-if指令,根据 true or false 来进行渲染。

在这里插入图片描述

data里面初始化paginationShow为true
在这里插入图片描述

在 查询方法(因为我的查询方法会调到callHttpRequest() ,所以写在这里)里把paginationShow置为false
在这里插入图片描述

在接口请求完毕后,将paginationShow改为true
在这里插入图片描述

看到有人说需要在$nextTick画面刷新完毕后再更改值,否则没效果, 但 我发现 好像关系不大。。

总之,现在页码正常啦。

调试过程中发现, 其实在点击换页之后 vue 是有刷新 current-page的,感觉中间会刷新几次,在最后一次的时候,是取的初始化的默认值。

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值