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 新值
用法说明:向响应式对象中添加一个 键值对或值 ,并确保这个新 键值对或值 同样是响应式的,且触发视图更新。