业务场景及问题描述
可编辑表格中有两个选择器,第一个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 下拉选择无反应 无法选择