ElementUI的table自定义列select选中值不更新问题

vue官网关于 vue.set 的介绍：

向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新 property，因为 Vue 无法探测普通的新增 property (比如 this.myObject.newProperty = 'hi')

重点是：Vue 无法探测普通的新增 property
注意：此问题由数据元素的对象里动态添加属性导致

一、 现象

使用el-table的自定义列功能，同一行数据的两列有互动，当一列（值来源）数据改变，另一列（默认值）的el-select无法选中值（实际v-model对应的数据已改变，但是页面上没有更新），如图：

示例table.png

二、原因

默认值这一列对应的select的v-model对应的字段是在table生成后动态插入的，初始的数据结构类似：

//data 为el-table的data
var data=[
  {src:'param'}
]

src字段改变后，在值来源的select的change事件里，给这一行数据增加了default字段；

//data 为el-table的data
var data=[
  {src:'param',default:''}
]

结果就是，默认值的select无法正常选择了。

三、解决方法

1.初始化时所有属性赋初始值

这种方法能适应大部分情况。

• 优点：数据结构一目了然，便于维护
• 缺点：假如表格里的每一行字段各异，初始化时需要创建大量冗余字段，并且在数据提交之前可能需要进行二次数据结构转换；假如是特殊的使用场景，可能初始化时无法穷举。

2.增加新属性时，使用Vue.$set

这种方法可以普适性强，当然有一些局限，官网有说明：

注意对象不能是 Vue 实例，或者 Vue 实例的根数据对象。

• 优点： 普适性强
• 缺点：动态添加属性，会增加调试难度（使用时必须得知道某一个时刻，该对象有没有新增属性）；写的代码更多（a.b=1 vs this.$set(a,'b',1)）。