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

已于 2023-04-27 11:02:37 修改
阅读量5.7k 收藏 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
版权

问题背景

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

问题描述

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

解决方法

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

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

机械吴哥123
关注
  • 1
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue列表数据发生变化指令没有更新问题及解决方法
10-15
主要介绍了vue中使用指令，列表数据发生变化指令没有更新问题，本文给出了解决办法,需要的朋友可以参考下
vue数据更新UI不刷新显示的解决办法
11-19
vue比较常见的坑就是数据（后台返回）更新了，但是UI界面并没有更新，常见于以下情况： 一、数据为数组时 1.通过数组索引修改数组元素例如： 此时UI数据并不会刷新 2.修改数组长度时： 解决方案： 如果data为JSON数组则如下： 第一个参数为要更新数据的数组，第二个参数为要更新的数组中具体的元素下标，第三个参数为新数据 备注: 数组原型上的方法vue可直接检测到变化：push(),pop(),shift(),unshift(),splice(),sort() 二、数据为对象时: Vue 不能检测对象属性的添加或删除：你可以这样添加一个属性 如果要添加多个属性可以 补充知识：v
AngularJS进阶(十一)AngularJS实现表格数据的编辑,更新和删除
最新发布
2401_84447149的博客
04-28 837
);
vue数据更新table内容不更新解决方法
小易不止于搬砖的博客
08-08 5982
2、为table绑定一个key，数据变化时更改key值,或者使用v-if绑定一个不重复的值触发组件渲染。table组件绑定的数据变化时，页面没有重新渲染，常见于子组件中使用table组件。创建实例时 数组在vue中没有被监听到，属于非响应式数据，数组的下标变化无法监听到。1、利用vue中重写的数组方法。3、使用$set()
vue+elementUI 数据变化但el-table表格没有更新问题
li222248的博客
05-23 2478
vue会判断dom节点上的key是否改变，如果有变化，会产生真实DOM更新。这个问题，可以通过v-for里为什么不能使用默认index作为key的原因一个道理。在el-table中添加key，设置成boolean类型，点击保存的时候更新key值就可以了。也可以传数字累加，赋值给key值。vue会通过key值改变，从而产生真实DOM更新。拖拽排序后保存后能看到拿到的数据是变化的，但表格没有更新。
vue vxe-table循环新增表格时，数组双向绑定无效导致页面表格不更新的问题，set、$forceUpdate、深拷贝、深度监听无效
qq_38270855的博客
04-10 438
数组双向绑定使用，set、$forceUpdate()、深拷贝、深度监听无效
vue element中table某列未刷新，如何解决这个问题？以及解决方案。
不确定因素的博客
07-22 746
遇见问题 Vue Element table使用时，某列未刷新。 <el-table-column prop="statusDesc" min-width="140" label="申请进度" align="center"> <template slot-scope="scope"></template> </el-table-column>![请添加图片描述](https://img-blog.csdnimg.cn/f8e312a59
vue3 table更新之后刷新当前页方法
云雨之石的博客
07-11 2564
在做toB系统的时候，避免不了表格的一些操作，编辑、删除、新增、复制等，那么在操作完成之后，我们希望能够刷新一下当前表格，并且让表格的页面回到第一页，这个时候可以使用provide和inject来实现代码如下： 在我们需要进行更新的页面的代码如下：......
vue el-table 表格内编辑 点击字段可编辑 点击其他位置编辑消失
qq_44716001的博客
06-15 1990
【代码】vue el-table 表格内编辑 点击字段可编辑 点击其他位置编辑消失。
VUE——DOM更新、ref
fxinn的博客
06-22 867
1、数据更新后DOM不更新 2、数据跟更新后DOM不更新，第二次点击的时候才更新 DOM 的异步更新
ElementUI中的 table expand异步加载，需要点2次才渲染数据的问题解决
just路人周
08-28 5062
原因大家都懂，我就不说了，解决方案一大堆，什么$set(),改css的，我都试了，全部没效果，仍然需要点2次才出现数据。我想要实现的是点开每一行的expand,显示的是该行数据的children数据，点开另外一行，不会影响到其他行，各行只显示他自己的children数据。先贴我成功的代码 <!-- 外层表格 row-key="id" :expand-row-keys="expandKeys" 必须有 --> <el-table :data="dataList" fit styl
vue2.0结合DataTable插件实现表格动态刷新的方法详解
08-31
主要介绍了vue2.0结合DataTable插件实现表格动态刷新的方法,结合具体项目实例形式分析了vue2.0结合DataTable插件实现表格动态刷新过程中遇到的问题与相应的解决方法,需要的朋友可以参考下
vue elementUI table表格数据 滚动懒加载的实现方法
01-19
vue+elementUI table表格展示数据，当数据很多的时候，不能一页显示完，同时一次请求数据量太大，会增加网页渲染的时间，影响体验， 这个时候常常有两种方法处理， 1、分页，如下   2、如果我不想分页，又想在一页...
基于vue实现web端超大数据量表格的卡顿解决
10-17
【基于Vue实现Web端超大数据量表格卡顿解决】 在Web开发中，处理大量数据时，尤其是当数据呈现为表格形式时，用户界面的卡顿问题是一个常见的挑战。Vue.js作为一个轻量级的前端框架，虽然高效且易于使用，但在处理...
Vue+ElementUI table实现表格分页
12-13
前端分页：后台只需将数据返回，不需要做过多处理，前端一次请求拿到所有数据后做分页处理。但数据量不能太大，因为前端是先一次性加载所有数据，然后在做分页处理。在数据量多的情况下，加载相对应的会变慢。所有在...
vue中导出Excel表格的实现代码
10-17
在Vue项目中，导出Excel表格是常见的功能，特别是在后台管理系统中，为了方便用户将大量数据保存为本地文件。本文将详细介绍如何在Vue环境中实现这一功能。 首先，我们需要安装必要的依赖库。`file-saver`用于文件...
基于Vue+element-ui 的Table二次封装的实现
10-18
当我们需要对表格进行定制化或者复用时，进行二次封装是常见的做法。 首先，二次封装的目标是为了提高代码的可维护性和重用性，减少重复工作。在本例中，作者创建了一个名为`com-table`的自定义组件，用于替代...
vue 解决el-table 表体数据发生变化时，未重新渲染问题
goodboxs的博客
01-18 2028
父组件中数量改变后总数重新计算。
错误描述：在el-tabs标签内添加表格后，点击切换表格数据不会立即刷新需点击两次数据才会刷新。
weixin_45265393的博客
02-08 1565
在el-tabs标签内添加表格后，点击切换表格数据不会立即刷新需点击两次数据才会刷新。
vue2 长table
04-04
在 Vue2 中，你可以使用 `v-for` 指令和计算属性来渲染长表格。 首先，你需要定义一个包含表格数据的数组。在这个数组中，每个元素都代表一行数据。然后在模板中，你可以使用 `v-for` 指令来遍历数组，并渲染每一行数据。 下面是一个简单的例子： ```html <table> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> </thead> <tbody> <tr v-for="person in persons" :key="person.id"> <td>{{ person.name }}</td> <td>{{ person.age }}</td> <td>{{ person.gender }}</td> </tr> </tbody> </table> ``` 在上面的例子中，我们使用了 `v-for` 指令来遍历 `persons` 数组，并渲染了每一行数据。注意到我们还使用了 `:key` 属性来指定一个唯一的键，以便 Vue 能够正确地跟踪每个元素。 如果你的表格数据比较大，你可能需要考虑分页来提高性能。这时，你可以使用计算属性来动态地渲染每一页的数据，而不是一次性渲染所有数据。 下面是一个使用分页的例子： ```html <table> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> </thead> <tbody> <tr v-for="person in filteredPersons" :key="person.id"> <td>{{ person.name }}</td> <td>{{ person.age }}</td> <td>{{ person.gender }}</td> </tr> </tbody> </table> <div> <button @click="prevPage">上一页</button> <span>{{ currentPage + 1 }} / {{ pageCount }}</span> <button @click="nextPage">下一页</button> </div> ``` ```js export default { data() { return { persons: [...], // 表格数据 pageSize: 10, // 每页显示的数据条数 currentPage: 0 // 当前页码 } }, computed: { pageCount() { // 分页总数 return Math.ceil(this.persons.length / this.pageSize) }, filteredPersons() { // 动态计算当前页的数据 const start = this.currentPage * this.pageSize const end = start + this.pageSize return this.persons.slice(start, end) } }, methods: { prevPage() { // 切换到上一页 if (this.currentPage > 0) { this.currentPage-- } }, nextPage() { // 切换到下一页 if (this.currentPage < this.pageCount - 1) { this.currentPage++ } } } } ``` 在上面的例子中，我们使用了一个名为 `filteredPersons` 的计算属性来动态计算当前页的数据。我们还定义了两个方法 `prevPage` 和 `nextPage` 来实现切换页码的功能。最后，我们在模板中添加了两个按钮，用于切换页码。 总的来说，使用 `v-for` 指令和计算属性来渲染长表格是非常简单的。如果你的表格数据比较大，你可以使用分页来提高性能。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值