vue+ element 小白初次实践踩坑（二）-数据刷新，页面没改变

已于 2022-11-09 17:54:05 修改
阅读量699 收藏
点赞数
文章标签： js vue
于 2020-11-12 17:20:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/summer_cloudy/article/details/109648726
版权
在Vue+Element UI实践中遇到数据刷新后页面未更新的问题，包括两种情况：一是页面跳转后需强制刷新浏览器才显示新数据；二是组件间数据同步延迟导致状态未改变。解决方法涉及在父组件中创建方法，接收子组件传递的新数据并更新。
摘要由CSDN通过智能技术生成

vue+ element 小白初次实践踩坑（二）-数据刷新，页面没改变

在使用vue的时候一个页面会有多个组件构建，所以会发生数据刷新，但是页面上的变化不完全

1.第一种：一个页面可以跳转到另一个页面，但是两个页面是共用的，点击跳转之后，必须强刷浏览器，数据才会更新
解决：

beforeRouteUpdate(to,from,next){
   

    this.id = to.params.id;

    this.
最低0.47元/天 解锁文章
阿夏呀
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0后台管理系统
05-02
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+...
element-ui 表格 修改后, 表格里面的数据不实时更新问题
github_37759996的博客
05-14 3458
element-ui 表格 修改后 表格里面的数据后 页面不实时更新问题 完美解 想要达到的效果：点击"更多"后，"更多"隐藏，删除和补仓显示；（有时间可全部看完，没时间直接看做法6/7） 尝试用的方法：自己用 this.show、在百度上找的方法 set 都没能成功 提示：最下面有代码demo 页面初始化： 目标效果 做法1： 给"更多"绑定一个 v-show=‘show’ 把 this.show 设置为true ，点击"更多"按钮后 在点击事件里面把this.show 设置为false； 结果1： 未成
vue-element-admin局部刷新页面
a125129167的博客
05-15 6612
在写业务需求的时候遇到了一个帮助文档的需求，里面存在大量静态页面，有考虑几个方案. 组件引入 嵌套路由局部刷新 后面考虑了考虑了如果频繁引入组件会导致不好修改。这里就想到了嵌套路由的局部刷新。因为借鉴了友盟,华为云的文档中心Tree树形控件局部刷新。就考虑如何去使用去做. vue-element-admin项目大家在使用的时候会发现他会自带一个页面切换动画效应。就算我们写好了局部刷新的路由代码，也会产生动画。这边就在路由的meta属性加了一个showZj参数,true则不刷新,fal...
vue2中使用element表格实时更新数据并排序时不生效
weixin_50307964的博客
06-09 612
一次同事发现一个bug（问题）；不知道怎么解决，就叫我一起协助看看；主要的原因是，数据在增加的时候可以排序，但是数据在修改的时候无法排序。以下图：是我模拟的一些数据，然后复现的这个问题：注意看效果图序号【2】【8】的金额变化。
elementUI表格el-table数据排序/更新后，不重新渲染（页面数据不更新）
zzjbj910的博客
05-16 1451
查看element文档，数据需要设置key，但是用el-table提供的row-key不太好用。这里预测是，前后数据内容一致，dom不更新，可能是为了提升页面性能。给table增加一个随机key，每次重新赋值tableData的时候，也传递随机key值，这样页面就可以重新渲染el-table了。前端页面选择重新排序，重新向后端请求数据，排序规则改变但数据内容不不变，表格数据不重新渲染。
Vue Element UI 之实现点击按钮刷新 Echarts 图表
倚树探星的博客
03-21 8104
要实现这个功能，首先要求开发人员对 Vue 生命周期有清晰的了解和认识 前言 去官方文档看了看，文档中提到的是根据Options数据内容变化实时更新Echarts，并没有触发点击事件时才刷新的方法；去百度搜了一下，也没有此类的文章，多是和官方文档一样，设置定时器动态刷新 Echarts 关于触发某事件时更新 Echarts 数据，个人感觉难点在于 Echarts 图表数据的渲染要求 DOM 渲...
Vue + Element-ui的下拉框el-select获取额外参数详解
10-14
在Vue.js框架中，Element-ui库提供了一套丰富的UI组件，其中包括用于创建下拉框的`el-select`组件。在实际开发中，我们可能需要在用户改变选择时获取额外的信息，比如当前行的数据或者自定义的属性。本文将详细介绍...
Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义
10-16
在本文中，我们将深入探讨如何在Vue项目中集成Element UI和vue-quill-editor，创建一个功能丰富的富文本编辑器，并实现图片的自定义上传。Vue是一个轻量级、高效的前端框架，Element UI则是一个基于Vue的组件库，...
基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip
最新发布
04-12
基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip 基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip 基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip 基于...
vue实现页面刷新以及局部刷新的方法
qq_33235680的博客
05-20 1万+
vue实现页面刷新以及局部刷新的方法
问题记录：vue 数据更新，el-form, el-table等不更新，不重新渲染解决办法
weixin_42120767的博客
11-01 4027
一次开发中，使用了el-dialog弹窗组件，组件里使用了el-form组件，并且里面使用了el-input, 但是发现第一次打开弹窗是有数据的，后面再打开弹窗就不在显示数据了。 1.打印数据，数据在每次打开弹窗确实是传过来的。加上$forceUpdate(),无效！ 2.在el-form外的地方用div显示数据，发现是正常的，说明数据都是正常的，那么就是el-from的问题。 解决办法： 在el-form上绑定key, 假设为:key=“formDataStatus” 默认值 formDataStatus
Element plus 部分组件组件数据更新，页面没有更新
qq_43371595的博客
03-18 1012
最近用到了Tabs 标签页 <el-tabs ref="tabs" v-model="data.activeName" type="card" class="demo-tabs" @tab-click="checkTab" > <el-tab-pane v-for="item in statusList" :key="item.value" :name="item.value"> &lt
Vue数据更新，页面却没有更新的几种情况及解决方法
LFQP_的博客
03-27 2万+
Vue数据更新，页面却没有更新的几种情况及解决方法
Vue+Element-UI菜单二次点击刷新方法，且只刷新页面表格区域
Aiqian9的博客
04-20 5761
  最近在开发一个Vue + Element-UI的项目，发现Element-UI中的NavMenu 导航菜单点击已选中的菜单时刷新不了页面，上网找到一些相关资料进行改进，实现二次点击菜单时能够无闪烁刷新页面，且只刷新表格区域。 项目中采用的是Container 布局容器，如下： 父组件中： <el-container> <el-aside> <SideMe...
【前端】Vue实现操作A页面时，刷新B页面的数据(局部刷新)
SouthNAN的博客
03-30 6401
参考链接：VUE实现页面局部刷新 本功能是在此文章的启发下进行改进的 业务需求： 点击“详情”的时候刷新通知消息，但不能整个页面一起刷新，而消息通知和列表并不在一个页面上 解决方案： 1、在需要局部刷新的标签上加上【v-if="isRouterAlive"】，当然navbar 标签只是在此处引入【消息通知】的，其具体实现在其他页面，样式已省略 <template> <div :class="classObj" class="app-wrapper"> &l
VUE + element-ui实现当前页面/表格刷新方法
热门推荐
weixin_41127584的博客
10-15 3万+
之前在做elementui的项目，一些新增，编辑，删除等操作后，需要刷新当前页面或者表格，看官方文档没找到合适的方法，之前是直接重新再调一遍后台接口进行数据的刷新，今天发现一个不错的方法，来记录一下 App.vue中配置入下 <template> <div id="app"> <router-view v-if="isRouterAlive">&l...
vue.js element表格数据刷新，页面重叠，router name重复
hotqin888的专栏
03-23 2899
在开始用vue.js element过程中，从网上抄的代码，遇到不少坑，记录一下。 1.在router里的index.js，用了 import App from '@/App' path: '/', name: 'App', 导致页面重叠，因为我在App.vue里放了侧栏和面包屑。 实际上看其他例子，App.vue里只有简单几行代码 <template> <d...
解决el-table数据发生了变化，但是页面显示的数据不更新问题
qq_46103732的博客
06-06 3749
解决el-table数据发生了变化，但是页面显示的数据不更新问题。 通过修改绑定在 table 上面的 key 值，可以触发 el-table 的重新渲染，首先给表格绑定一个key： 在数据发生变化后更新key的值：
vue element table sortable 拖拽排序 数据更新但页面没有更新
baixue0111的博客
01-25 3535
问题： 项目开发中有个需求是需要给table 表格 增加拖拽排序功能，我使用了sortable.js 在使用过程中发现 拖拽之后 数据发生了变化，但是页面并没有更新，怀疑是table 视图渲染问题。 解决方案： element table 中有一个属性叫 “row-key” 功能是 用来优化 Table 的渲染。 ...
springboot+vue+element ui+mybatis-plus文件分享怎么做
09-07
4. 在前端应用程序中使用Vue和Element UI来实现文件分享页面。可以设计一个文件列表的组件，展示已上传的文件信息，例如文件名、大小、上传时间等。使用Element UI的Table组件可以方便地展示数据。 5. 在文件列表...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值