vue数据更新后，表格没有更新，需要点击两次才更新

已于 2023-04-27 11:02:37 修改
阅读量6k 收藏 13
点赞数 1
分类专栏： vue 文章标签： vue.js
于 2022-05-30 16:55:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41498246/article/details/125049768
版权
在Vue开发中遇到点击按钮获取后端数据，表格未能即时响应数据变化的问题。表格只在第二次操作后才更新。解决方案是通过为el-table设置动态key，每当数据更新时增加key值，强制DOM更新，从而实现表格正确刷新。
摘要由CSDN通过智能技术生成

问题背景

开发背景，点击按钮获取后端不同的返回数据，根据数据进行表格的渲染，数据列的数量不同，想要达到的效果是点击不同的按钮，弹出不同的表格，表格根据列的变化而变化。

问题描述

1、vue中表格数据更新之后，表格并没有更新，二次触发之后，才更新。

解决方法

1、给el-table设置一个key，每次当数据更新之后，再将key值+1，相当于改变了dom元素，从而触发dom元素的更新，达到更新表格的目的。

1、在《el-table》中加入属性
在这里插入图片描述
2、在data中加入变量的定义并初始化
在这里插入图片描述
3、在methods的函数中通过对变量的自增，从而触发el-table 的刷新
在这里插入图片描述

机械吴哥123
关注
专栏目录
vue+elementUI 数据变化但el-table表格没有更新问题
li222248的博客
05-23 2579
vue会判断dom节点上的key是否改变，如果有变化，会产生真实DOM更新。这个问题，可以通过v-for里为什么不能使用默认index作为key的原因一个道理。在el-table中添加key，设置成boolean类型，点击保存的时候更新key值就可以了。也可以传数字累加，赋值给key值。vue会通过key值改变，从而产生真实DOM更新。拖拽排序后保存后能看到拿到的数据是变化的，但表格没有更新。
vue 改变数据后，数据变化页面不刷新
肥晨开发的学习之路
05-11 5579
this.$nextTick 跟全局方法 vue.nextTick 一样，不同的是，回调的 this 自动绑定到调用它的实例上。this.$nextTick 将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它，然后等待DOM更新。在vue项目中，会遇到修改完数据，但是视图却没有更新的情况。使用方法：直接调用即可，或者放到html里面使用。vue 改变数据后，需要滑动页面，数据才更新。vue中表格数据已改变，页面却未更新数据。vue 改变数据后，数据变化页面不刷新。
ElementUI，解决修改el-table中的数据，数据更新了但视图无法及时更新的问题
最新发布
anqiaoyun的博客
07-24 951
ElementUI，修改el-table中的数据，视图无法及时更新的完美解决办法
错误描述：在el-tabs标签内添加表格后，点击切换表格数据不会立即刷新需点击两次数据才会刷新。
weixin_45265393的博客
02-08 1664
在el-tabs标签内添加表格后，点击切换表格数据不会立即刷新需点击两次数据才会刷新。
Vue修改数据页面不更新的问题解决
热门推荐
Suk__的博客
04-10 1万+
第一种场景:动态给对象新增属性或者删除属性是不会触发视图刷新的,Vue识别不到: 第二种场景:通过数组下标修改数组中的元素或者手动修改数组的长度,Vue识别不到: 解决方法1:静默刷新(使用v-if的特性) 在修改值之后将元素销毁,然后在修改后的下一次DOM渲染完成时再显示出来,这样就会触发组件重新加载data的数据进行渲染,data中被修改的数据才是最新的 解决方法2:Vue.$set(官方推荐) 官方对这个API的解释就是使用这个api修改的数据会为其添加响
vue中数据已经改变了，但是table里面内容没更新渲染
qq_45067263的博客
05-21 1646
给table或者el-table标签上添加一个动态key值，只要数据发生改变，key值变动一下即可。标签上： :key=“timeStamp”更新数据：this.timeStamp++初始data：timeStamp:0,这样每次更新数据，都会使表格渲染。
el-table数据更新了，但是展示并没有更新
weixin_43923808的博客
01-25 2885
【代码】el-table数据更新了，但是展示并没有更新。
vue elementUI table表格数据 滚动懒加载的实现方法
01-19
vue+elementUI table表格展示数据，当数据很多的时候，不能一页显示完，同时一次请求数据量太大，会增加网页渲染的时间，影响体验， 这个时候常常有两种方法处理， 1、分页，如下   2、如果我不想分页，又想在一页...
基于vue实现web端超大数据量表格的卡顿解决
10-17
【基于Vue实现Web端超大数据量表格卡顿解决】 在Web开发中，处理大量数据时，尤其是当数据呈现为表格形式时，用户界面的卡顿问题是一个常见的挑战。Vue.js作为一个轻量级的前端框架，虽然高效且易于使用，但在处理...
vue 值改变后界面没有变_详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结...
weixin_39731456的博客
12-20 2834
如果你发现你自己需要在 Vue 中做一次强制更新，99.9% 的情况，是你在某个地方做错了事。1. Vue 无法检测实例被创建时不存在于 data 中的 property原因：由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的。场景：var vm = new Vue({d...
vue 提交form表单的时候，需要点击2次，画面会自动刷新
u012275249的博客
05-27 1162
搞了一个多小时的个坑，在登录画面提交表单的时候，必须加上 e.preventDefault() 要不然事件会被系统拦截到。 查了文档，给出如下作用： 说明 e.preventDefault()，该方法将通知 Web 浏览器不要执行与事件关联的默认动作（如果存在这样的动作）。例如，如果 type 属性是 “submit”，在事件传播的任意阶段可以调用任意的事件句柄，通过调用该方法，可以阻止提交表单。注意，如果 Event 对象的 cancelable 属性是 fasle，那么就没有默认动作，或者不能阻止默认
Reactive: Vue3数据更新但是表单没有更新
willluckysmile的博客
03-20 1014
过程中碰到了一个问题， 就是在编辑table的时候， 明明我把pinia的数据缓存更新了， 但是table的数据却没有更新， 其他地方也差不多是这样， 打印了各种log， 结果发现数据确实更新了， 然后随便更新下代码， 更新内容才会同步。整个的操作有点类似于其他语言的指针的样子， 对某个对象加了监听， 然后把这个对象的指针指向了其他的地方， 但是原来的那个对象的属性依然没有改变， 所以就触发不了事件。这两天在折腾前端， 因为前端基础不牢靠， 所以，通常都是猜一半， 查一半， 基本上也就是个面向百度编程。
vue 解决t-enhanced-table 表格数据发生变化后，未重新渲染｜页面不更新问题
weixin_43568851的博客
07-13 449
时，更改表格数据后请求，取服务端返回的数据对表格重新赋值，表格数据已经发生了变化，但是页面显示的数据却没更新，or无法再监听到t-enhanced-table 数据在界面上的修改。1、给 t-enhanced-table设置一个key，可以设置成boolean类型的，在对表格赋值后更新这个key;在使用t-enhanced-table。
vue input输入框只读，手动赋值后提交form表单时，验证没刷新，依然验证为空
Liberty_yes的博客
11-24 1627
vue input输入框只读，手动赋值后提交form表单时，验证没刷新，依然验证为空
vue子组件调用父组件方法（添加完成后更新列表数据）
shi15926lei的博客
04-22 596
直接在子组件中通过this.$parent.event来调用父组件的方法。父组件把方法传入子组件中，在子组件里直接调用这个方法。向父组件触发一个事件，父组件监听这个事件就行了。三种方法都可以用,看自己喜欢使用那种.
Vue项目开发数组更新视图不更新
人在路上走
08-25 2476
Vue项目开发数组更新视图不更新 业务场景：Vue项目开发数组更换视图不更新 在methods里面的方法调用vm.items[indexOfItem] = 新的值;并不会刷新视图 .jpg “git图片”) 如上图，点击button触发change方法可以触发change方法，改变数组索引为1的值， 下图是我点击按钮两次的打印结果。 .jpg “git图片”) .jpg “git...
vue数据更新table内容不更新解决方法
小易不止于搬砖的博客
08-08 6494
2、为table绑定一个key，数据变化时更改key值,或者使用v-if绑定一个不重复的值触发组件渲染。table组件绑定的数据变化时，页面没有重新渲染，常见于子组件中使用table组件。创建实例时 数组在vue中没有被监听到，属于非响应式数据，数组的下标变化无法监听到。1、利用vue中重写的数组方法。3、使用$set()
vue中数据刷新问题
yuguang的博客
01-10 935
<el-form ref="formDataRef" :model="formData" :rules="formDataRules" label-width="130px" v-if="refresh"> </el-form> data() { return { detailData:{}, refresh: true, } }, watch: { detailData: { ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值