element-ui表格嵌套下拉框数据变了，视图不更新（已解决）

1、场景描述

表格里面嵌套下拉框，然后选择下拉框，数据变化，视图不更新。

2、解决办法

在下拉框change事件里面使用this.$set()方法使数据变为响应式进而更新视图，话不多说上代码。

表格下拉框

<el-table-column prop="userAuth" label="权限范围" align="center">
  <template slot-scope="scope">
    <el-select v-model="scope.row.userAuth" 
	  placeholder="请选择权限范围" 
	  size="small" 
	  @change="changeUserAuth(doctorsData,scope.$index,scope.row)">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
  </template>
</el-table-column>

下拉框变化方法

changeUserAuth(data,index,row){
  // data为表格数据源，index为要改变数据的下标，row是要更新的数据
  this.$set(data,index,row)
},

3、拓展：$set方法

使用方法：

this.$set( target, propertyName/index, value )

参数说明
{Object | Array} target 数据源
{string | number} propertyName/index 下标/键值
{any} value 新值

用法说明：向响应式对象中添加一个 键值对或值 ，并确保这个新 键值对或值 同样是响应式的，且触发视图更新。