网站建设51cto,100个经典商业案例分析,宜州设计公司,新媒体营销案例有哪些this.tableData为表格数据#xff0c;起初表格数据里的结构是固定的比如如下#xff1a;
tableData:[{name:名称‘#xff0c;age:12}]
初始数据虽然是这样的结构#xff0c;但有时候结构可能会改{name:名称,age:12,content:内容}
可能要多加一个字段。起初用this.$set以…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
