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

vue3中使用elementui,分页组件中,从详情页跳回来,希望能保留分页的当前页码,但是页码改变了,但是却视图没更新,还是初始值1。
在这里插入图片描述
尝试过的方法:
1、使用v-if刷新该组件,无效
2、使用nextTick,更新页码,也无效
3、v-if + nextTick ,也无效
4、。。。

最终解决办法
通过使用定时器,晚一点赋值,成功解决问题。
注意事项:
1、赋值要给Number类型
2、延迟赋值

setTimeout(()=>{
		panigation.currentPage = Number(Route.query.currentPage)
},500)

	很可能因为页面复杂的逻辑,导致这个值呗更改了。
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
### 回答1: 可能是因为有正确引入 Element UI 组件库的样式文件或者有正确配置使用 Element UI 组件。建议检查代码是否正确引入 Element UI 组件库的样式文件以及正确配置使用 Element UI 组件。 ### 回答2: 如果在使用 Vue 使用 ElementUI 时出现了不显示的情况,可能有以下几种可能的原因: 1. 未正确引入 ElementUI 组件库 在使用 ElementUI 前需要先安装并引入它们的样式和 JS 文件。可以在 Vue 的 main.js 全局引入 ElementUI,例如: ```javascript import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); ``` 该代码导入 ElementUI 的主题样式和 JS 文件,并在 Vue 实例使用 ElementUI 插件。 2. 某些组件有正确注册 在使用 ElementUI 时,必须先在 Vue 组件注册相应的组件,否则无法使用它们。可以在 Vue 组件的 script ,通过 import 导入所需的组件,并通过 components 属性将其注册到组件。 例如,在使用 el-button 时需先将其注册: ```javascript <template> <div> <el-button>Button</el-button> </div> </template> <script> import { ElButton } from 'element-ui'; export default { components: { ElButton, }, }; </script> ``` 3. 样式冲突 如果在 Vue 应用程序已经使用了其他的 css 规则,并且这些规则与 ElementUI 的规则有冲突,那么可能会导致 ElementUI 组件样式不正确。在这种情况下,可以使用 scoped 属性来限定每个组件的样式作用域,或者使用深度作用选择器(即 /deep/ 或 ::v-deep)。 例如,使用 scoped 属性: ```vue <template> <div> <el-button class="my-button">Button</el-button> </div> </template> <style scoped> .my-button { color: red; } </style> ``` 或者,使用 /deep/ 选择器: ```vue <template> <div> <el-button class="my-button">Button</el-button> </div> </template> <style> /deep/ .my-button { color: red; } </style> ``` 总之,如果在 Vue 使用 ElementUI 时出现不显示的问题,可以逐一排除以上可能的原因。同时,也可以查看控制台的错误信息和警告来进一步定位问题所在。 ### 回答3: 在Vue使用ElementUI显示可能有以下几种原因: 1. ElementUI组件并未正确引入 在Vue项目使用ElementUI,需要先安装ElementUI并在main.js引入并注册ElementUI组件。如果ElementUI组件并未正确引入,那么就不会正确显示。可以通过检查main.js文件是否有正确引入ElementUI组件来解决这个问题。 2. 缺失ElementUI样式表 ElementUI组件需要依赖样式表才能正常显示,如果缺少了ElementUI样式表,那么就会导致组件显示异常。可以通过检查index.html文件是否正确引用ElementUI样式表来解决这个问题。 3. ElementUI版本与Vue版本不兼容 如果Vue项目使用ElementUI版本与Vue版本不兼容,就会导致ElementUI组件无法正常显示。可以通过检查VueElementUI的版本是否一致来解决这个问题。 4. ElementUI组件使用错误及属性错误 ElementUI组件使用方式及属性设置需要按照官方文档的说明来进行。如果使用错误或者属性设置错误,就会导致ElementUI组件无法正常显示。可以通过检查组件使用方式及属性设置是否正确来解决这个问题。 如果以上方法都无法解决问题,可以在开发者工具查看控制台输出的错误信息,根据错误信息来找到问题所在。最好的办法是参照官方文档或者在社区寻求帮助。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值