批量更改表格数据不更新、不实时渲染、或则watch监听不到表格修改数据
接着上回 “解决el-table表格自定义数据后，数据不显示问题”后：
记录一下，解决el-table表格自定义数据后，数据不显示问题_el-table 加上:key不显示-CSDN博客
其实这个问题就是一个vue监测问题，vue监测不到更改的变化，就不能实时渲染。
我这里的功能是，批量更改表格数据，但是监听不到变化，上回是一个一个修改的，跟现在讲的功能不一样，但是也可以用这个方法，本质还是一样的。
第一种方法是监听的watch中添加deep:true，但是这种方法对我来说不管用，我需要监听某一列的数据，在批量更改后，统计数量，这时候，手动更改数据，他的监听并不能实时抓捕到。我总结了一下，
触发视图更新的以下几种方式：
1、就是常见的watch中添加deep:true，即深度监听，但是批量更改数据，也就是直接修改数据不一定都能有效
2、使用数组方法：如果你需要添加或删除数组元素，可以使用数组的方法，如 push、splice 等。这些方法会触发视图更新。例： this.tableData.splice(0, 1);
3、使用 Vue.set：如果你需要修改数组中对象的属性，可以使用 Vue.set 方法。这个方法会触发视图更新，例：this.$set(this.tableData[0], 'name', 'Tom'); 或 Vue.set(this.tableData[0], 'name', 'Tom');
‘methods‘方法中修改数据用的是this.$set(this.tableData[0], 'name', 'Tom');
直接修改数组的长度或使用索引修改数组元素，Vue.js 可能无法检测到变化并更新视图。在这种情况下，你应该使用数组的方法或 Vue.set/this.$set 方法来修改数据。
然后我这里用的是第3种方法this.$set(this.tableData[0], 'name', 'Tom');
this.$set(第i项数据, 待修改的字段,值)
原文地址：https://blog.csdn.net/weixin_57237676/article/details/143769921
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！