vue中表格数据已更新但界面内容没有更新,修复方案

this.tableData为表格数据,起初表格数据里的结构是固定的比如如下:

tableData:[{name:'名称‘,age:12}]

初始数据虽然是这样的结构,但有时候结构可能会改{name:'名称',age:12,content:'内容'}

可能要多加一个字段。起初用this.$set以及后续又用$nextTick,包括$forceUpdate都无效。

以及重构数组都只是数据变化而界面没有变化。

由于代码的复杂性,tableData数据有可能是其他接口获取的,有可能是其他变量中获取的。

但要理解他们的内存指向就能很好的去解决这个问题,如果用深拷贝,则指向位置变了,从而导致第一次修改会正常渲染,后面修改都无效了。
而vue监听的数据也是内存里的数据变化,当然以上的方法在其他的情况下也是能用的,但如果你的代码过于复杂变量的关联也过于复杂可以试试一下通用方法。代码如下:

let tableData = this.tableData
this.tableData = []
await this.$nextTick()
this.tableData = tableData

以上代码看起来像是废话,其实了解原理之后就能知道为什么这个方法可行了。
首先第一步定义变量let tableData的作用是用于将内存中的数据存储起来。存储起来的目的后面再说。

this.tableData = [] 则是强制清理表格数据。

这样vue即可会自动更新表格

this.$nextTick等表格更新完之后,

this.tableData = tableData 则是又将内存里的数据放到this.tableData中

这样vue又会看到表格数据又变化了,又会自动渲染表格界面。

变量与内存之间的关系不懂的可以看我的以下视频教程
js教程-引用类型存储过程 #数据存储 #web开发 #面试题_哔哩哔哩_bilibili

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/48849.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

生信豆芽菜-信号转导通路相关评分的计算

网址:http://www.sxdyc.com/gradeSigna 1、数据准备 表达谱数据,行为基因,列为样本 2、提交后,等待运行成功即可下载 当然,如果不清楚数据是什么样的,可以选择下载我们的示例数据,也可以关…

生成树协议

生成树协议 生成树协议是一基于OSI网路模型的数据链路层(第二层)通讯协定,用作确保一个无回圈的区域网络环境。通过有选择性地阻塞网络冗余链路来达到消除网络二层环路的目的,同时具备链路的备份功能,又称扩展树协定。…

SQL注入原理

SQL、SQL注入是什么? 结构化查询语言(Structured Query Language,SQL),是一种特殊的编程语言,用于数据库的标准数据查询。1986 年10 月美国国家标准协会对SQL 进行了规范后,以此作为关系型数据库系统的标准语言。1987 …

基于Spring Boot的社区诊所就医管理系统的设计与实现(Java+spring boot+MySQL)

获取源码或者论文请私信博主 演示视频: 基于Spring Boot的社区诊所就医管理系统的设计与实现(Javaspring bootMySQL) 使用技术: 前端:html css javascript jQuery ajax thymeleaf 微信小程序 后端:Java …

【仿写tomcat】一、tomcat工作流程

仿写tomcat 简介tomcat简介流程分析tomcat是怎么和访问者交互的?流程图 简介 作者前不久刚仿写了一个简易的tomcat,在此分享给各位,此篇为对tomcat的简介和流程分析,具体仿写内容后续会贴在这里 扫描java文件,获取带…

Linux 定时任务 crontab 用法学习整理

一、linux版本 lsb_release -a 二、crontab 用法学习 2.1,crontab 简介 linux中crontab命令用于设置周期性被执行的指令,该命令从标准输入设备读取指令,并将其存放于“crontab”文件中,以供之后读取和执行。cron 系统调度进程。…

关于LED电子显示屏幕的显示功能

因为LED显示屏的发光颜色和发光效率与制作LED的材料和工艺相关,目前广泛采用的有红、绿、蓝三种颜色的LED。这些LED的独特之处在于它们工作时需要的电压极低(仅1.5-3V),能够主动发光,并且具有一定的亮度。这亮度可以通…

【面试刷题】——什么是深拷贝和浅拷贝?

深拷贝(Deep Copy)和浅拷贝(Shallow Copy)是在编程中用来描述对象拷贝的两个概念,特别是在涉及对象包含其他对象(如嵌套数据结构、指针等)的情况下。 浅拷贝(Shallow Copy&#xff…

苹果手机桌面APP带云图标有个箭头,过一段时间经常要下载才能使用APP

环境: IPhone 11 IOS13.0 问题描述: 苹果手机桌面APP带云图标有个箭头,过一段时间经常要下载才能使用APP 解决方案: 1.打开设置,往下找到iTunes Store与App Store 2.找到下面卸载未使用的APP 关闭按钮

C 语言学习

数组的指针 在c中&#xff0c;几乎所以使用数组名的表达式中&#xff0c;数组名的值是一个指针常量&#xff0c;也就是数组 第 一个元素的地址。注意这个值是指针常量&#xff0c;不是变量。 int a[10]{ ….....}; int *q; q&a[0] ; <>…

第1步---MySQL安装和配置

第1步---MySQL安装和配置 1.下载地址 MySQL :: Download MySQL Community Server (Archived Versions) 直接下载zip形式的就可以。 2.在bin的同级目录下常见my.ini文件。 输入下面的内容 my.ini中的文本&#xff1a; [mysqld] #设置3306端口 port3306 character-set-server…

线程池一定需要了解的那些事

一、阿里Java开发规范&#xff0c;为啥禁止直接使用Executors创建线程池 newFixdThreadPool 及 singleThreadPool 中默认队列长度为 Integer.MAX_VALUE&#xff0c;如果线程执行比较耗时&#xff0c;执行任务的线程在队列中产生大量堆积&#xff0c;进而有导致虚拟机OOM 的风险…

c#配置提供者

在 C# 中,配置系统是一种用于管理应用程序配置数据的机制。通常情况下,应用程序的配置数据包括连接字符串、应用程序设置、环境变量等。C# 配置系统允许您轻松地读取和使用这些配置数据,而不需要硬编码在代码中。 除了默认的配置提供者外,C# 配置系统还支持其他配置提供者…

关于内存融合cache fusion中锁模式的一些思考

集群中不可能即存在写锁&#xff0c;又存在读锁。这个从读写锁的语义上已经定义。集群中只能存在一个人持有写锁&#xff0c;其他人再申请写锁时必须要释放当前写锁。集群中可能存在多个读锁。集群中存在脏块时&#xff0c;可能存在&#xff08;一个或多个&#xff09;读锁&…

Numpy学习笔记

科学计算库&#xff08;Numpy&#xff09; 通常数据都能转换成矩阵&#xff0c;行就是每一条样本数据&#xff0c;列就是每个字段的特征&#xff0c;Numpy在矩阵运算上非常高效&#xff0c;可以快速处理数据并进行数据计算。 Numpy基本操作 先导入 import numpy as nparray…

【C语言】位段,枚举和联合体详解

目录 1.位段 1.1 什么是位段 1.2 位段的内存分配 1.3 位段的跨平台问题 2.枚举 2.1 枚举类型的定义 2.2 枚举的优点 3. 联合&#xff08;共用体&#xff09; 3.1 联合类型的定义 3.2 联合的特点 3.3 联合大小的计算 1.位段 1.1 什么是位段 位段的声明和结构体是类…

关于python如何使用sqlalchemy连接sap_hana数据库

1.先安装sqlalchemy pip install sqlalchemy 2.from sqlalchemy import create_engine 3.创建数据库连接方式&#xff1a; 假设数据连接方式如下&#xff1a; usernameH_TEOPT passwordww122222 jdbcUrljdbc:sap://192.163.1.161:21681/?currentschema 那么使用sqlalchemy 的…

EureKa快速入门

EureKa快速入门 远程调用的问题 多个服务有多个端口&#xff0c;这样的话服务有多个&#xff0c;硬编码不太适合 eureKa的作用 将service的所有服务的端口全部记录下来 想要的话 直接从注册中心查询对于所有服务 每隔一段时间需要想eureKa发送请求 保证服务还存活 动手实践 …

动态规划入门之线性动态规划

P1115 最大子段和 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 题目要求求连续得一段子串使其累加和最大。 我们做动态规划首先考虑小情况&#xff0c;然后推而广之。 假设三个数1&#xff0c;-2&#xff0c;5. 我们先选1然后我们在-2以及-2加1里边选&#xff0c;我们选…

element表格多选实现

表格实现多选 实现表格多选很简单&#xff0c;只需要在表格里加上一列即可&#xff0c;加完之后就会在表格里出现一列白色的四方块按钮&#xff0c;可以多选&#xff0c;也可以单选 <el-table-columntype"selection"width"55"align"center"&…