需求
在一个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 |