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.   }
vue