Element-ui踩坑记录 select选择器 下拉选择无法选中

·  阅读 2185

业务场景及问题描述

可编辑表格中有两个选择器,第一个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 下拉选择无反应 无法选择

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改