element-ui 使用 Select 组件给 value 属性绑定对象类型

qq_36437172 2020-06-28 22:38:49  778  收藏

分类专栏： element-ui 文章标签： element-ui Select 组件 value 属性 绑定 对象类型

版权

问题描述：当 value 属性绑定的是对象类型时，回显数据是，下拉框选项都是高亮选择样式，同时切换选项时，绑定的 v-model 视图没有对应改变。

1.value 绑定的是对象时，在 el-select 添加 value-key="id"属性，el-option中添加 :key="item.id" 属性，其绑定的 id 必须具有唯一性。

2.value-key 的值与 key 绑定的属性值对应。

1.  
   <el-form-item
2.  
   label="货物信息"
3.  
   prop="goodsInfo"
4.  
   >
5.  
   <el-select
6.  
   v-model="baseForm.goodsInfo"
7.  
   placeholder="请选择"
8.  
   value-key="itemName"
9.  
   @change="changeGoodsInfo"
10.  
    >
11.  
    <el-option
12.  
    v-for="item in goodsCategoryData"
13.  
    :key="item.itemName"
14.  
    :label="item.itemName"
15.  
    :value="item"
16.  
    />
17.  
    </el-select>
18.  
    </el-form-item>

我们如何强制更新视图呢？下拉选择中添加 change 事件获取选中值，使用 Vue 2.x 版本的  vm.$set 进行更新视图。

1.  
   changeGoodsInfo (value) {
2.  
   this.$set(this.baseForm, 'goodsInfo', value)
3.  
   }