解决vue+element 表格内容不刷新问题

现在在做一个项目，使用vue+element组件。制作的表格如图：

数据结构为：

产品图片单元为一个图片数组productPic，在对该行进行编辑时，productPic的长度发生变化时，表格内显示的图片依旧为一张。

 查看元素可以发现，只生成了一个img元素，但是在console中可以看到productPic是有两张图片的。

 这时候思考一下是不是展示图片的时候v-for没有刷新，百度了一下，参考博客：

vue中页面for动态刷新_X_xooo的博客-CSDN博客

 尝试刷新v-for数据，但是并没有带来变化，那么看起来不是v-for的问题。

将目光放到el-table上来，是不是el-table没有刷新呢？参考博客：

 vue 页面刷新 表格刷新 数据刷新_爱草莓的番茄酱的博客-CSDN博客_vue刷新表格数据

其中提到了三种方法：

1.刷新页面	因为表格是嵌入在一个表单里的预览，刷新页面会丢失填写的数据，方法不适合本次问题，并且刷新页面会有明显的卡顿，用户体验较差。
2.表格刷新	在el-table中添加v-loading属性，并且设置为true，发现并不能解决问题，在此猜测可能因为productPic为数组，其内容变化在上级数组不可见，因此没有进行刷新。
3.数据刷新	出现的问题如方法1及方法2一致，数据为用户输入信息，没有load方法，对于productPic的修改没有引起el-table的刷新。

虽然这个博客没有解决我的问题，但是引发了我的思考，同时巧合之下发现，编辑完条目后，新增新的条目，被编辑的条目也发生了变化。

那么对比新增条目和编辑条目的代码，可以发现新增条目改变了 productInfo数组的长度，也就是增加了表格的长度，由此引起了el-table的刷新。那么问题变得简单了起来，在编辑条目的函数下，进行一次productInfo数组长度的修改即可。

this.productInfo[this.proModifyIndex] = JSON.parse(JSON.stringify(this.ProForm));
//修改info数组长度，刷新table表格，修复编辑图片不刷新问题
this.productInfo.push(JSON.parse(JSON.stringify(this.ProForm)));
this.productInfo.splice(this.productInfo.length - 1,1);

小tips：使用JSON.parse(JSON.stringify())可以解决引用的问题，避免作为temp的类和存储数据的List指向同一片内存，导致修改temp类时，同时将List中的数据覆盖。