element中select，值更新视图不更新

一、 业务逻辑

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

二、原因

默认值这一列对应的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)）。

作者：果酱风
链接：https://www.jianshu.com/p/4af03f45a3f3
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。