Element-ui踩坑记录 select选择器 下拉选择无法选中

业务场景及问题描述

可编辑表格中有两个选择器，第一个select选择器，选择项变化时，清空第二个select选择器选择项并请求第二个选择器下拉列表数据,当做出清空选择器绑定数据后，第二个选择器下拉项无法选择。
代码段:

<el-table-column prop="transferCustomer"
                 width="200">
  <template slot-scope="scope">
    <el-select v-model="scope.row.transferCustomer"
               @change="getAddrList($event, scope.row)">
      <el-option v-for="item in transferDate"
                 :key="item.id"
                 :label="item.name"
                 :value="item.id">
      </el-option>
    </el-select>
  </template>
</el-table-column>
<el-table-column prop="addressCodes"
                 width="200">
  <template slot-scope="scope">
    <el-select v-model="scope.row.addressCodes"
               multiple>
      <el-option v-for="item in addressCodeList"
                 :key="item"
                 :label="item"
                 :value="item">
      </el-option>
    </el-select>
  </template>
</el-table-column>
复制代码

问题代码段:

getAddrList(val,row){
  row.addressCodes = []
}
复制代码

问题出现原因

受现代 JavaScript 的限制 (以及废弃 Object.observe)，Vue 不能检测到对象属性的添加或删除。
tips： 在vue里，当你对一个不存在的属性或对象直接“.”进行赋值，或者对数组不存在的索引项直接用索引赋值，从控制台打印可以看到数据变更，但无法使视图更新

解决方案

1.可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式属性(当前使用的解决方案)

getAddrList(val,row){
  this.$set(row, 'addressCodes', [])
}
复制代码

2.使用vm.$forceUpdate()方法，迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。

tips： 仅提供一个解决思路，该方法对我这个问题无效。如上所述，该方法的业务场景适用于，当前select选择器，手动更新绑定值，下拉选择无响应时，可强制刷新一下当前select组件。

后记

经过大佬指点，发现js处理逻辑有问题，不存在的属性提前处理，再赋值给列表绑定的值，就不会存在这个问题了。当然，上文的解决方案，也可以作为参考，毕竟业务场景多种多样，我这种修改方案也不一定适用于其他场景。

 getContractGoodsRel(params).then(res => {
   this.loading = false;
   //问题代码
   // this.contractGoodsList = res.data.contractGoodsList;
   // this.contractGoodsList.forEach(e => {
   //	e.addressCodes = []
   //   e.isAddress = true;
   // });
   
   //优化后代码
   res.data.contractGoodsList.forEach(e => {
     e.addressCodes = []
     e.isAddress = true;
   })
   this.contractGoodsList = res.data.contractGoodsList
});
复制代码

参考文章

element模态框dialog中的select组件中选中无反应
解决element-ui的下拉框有值却无法选中的问题
El-Select 下拉选择无反应 无法选择