Vue下拉列表赋值不生效（页面上不刷新）

需求

在一个table表格中，存在两个以上的下拉框，前一个选择值，后边的下拉选项都要改变

问题场景

table表格的某一下拉选择列，代码如下

<el-table-column prop="hw" label="出库货位">
  <template slot-scope="scope">
    <el-select v-model="scope.row.select1" @change="HWSelect(scope)"  placeholder="货位" no-data-text="暂无数据，请先选择库区">
      <el-option
        v-for="(val,key) in scope.row.arr1"
        :key="key"
        :label="val"
        :value="key">
      </el-option>
    </el-select>
  </template>
</el-table-column>
<!-- 以此类推 -->

然后change触发通过scope.$index找到了这一行并对另一个下拉选项组arr2改变，改变完发现页面上另一个下拉框的选项没有更新。

原因

vue2对于对象的监听只是浅监听，检测不到内部变化，也就无法触发双向绑定。

解决

vue2提供了this.$set(oldObj,key,newObj)来主动触发更新，参数

参数	含义
oldObj	要更新的对象，这个对象要直接存在于Vue的data中
key	更新对象的键，前两个参数相当于oldObj[key]。数组也是对象的一种，键取下标
newVal	新值。即oldObj[key]=newVal