el-select绑定的值为对象类型, 并可以回显高亮选中

​

1.需求如下:

当需要使用options里面其他属性的时候，select的value需要绑定成对象.

• 一个任务表, 保存了2个字段(用户id, 用户姓名) , 用户姓名用作冗余字段, 方便使用.
• 添加任务的时候, 可以下拉选择用户, 然后保存到数据库中.

 

2.需求分析:

两种思路:
①v-model绑定用户ID, 后台再去根据用户ID查询出用户姓名, 进行保存.
②前台直接传递用户ID 和 用户姓名到后台, 进行保存. ( 我选择的这种, 减少数据库操作 )
 

3.需求实现:

<el-form-item label="用户信息" prop="userInfo">
  <el-select v-model="form.userInfo" value-key="userId" @change="userInfoChange">
    <el-option
      v-for="item in userOptions"
      :key="item.userId"
      :label="item.nickName"
      :value="item"
    ></el-option>
  </el-select>
</el-form-item>

获取详情信息时, 给userInfo对象赋值进行回显操作: 
    this.form.userInfo = {'userId': this.form.userId, 'nickName': this.form.nickName};

//下拉选项改变事件.
userInfoChange(item) {
    this.form.nickName = item.nickName;
    this.form.userId = item.userId;
    this.$nextTick(() => {
      //this.$set 的目的是防止当对象(userInfo)更新了，视图层并没有更新为该数据
      this.$set(this.form.userInfo, 'userId', item.userId);
      this.$set(this.form.userInfo, 'nickName', item.nickName)
    })
}

*需注意的几点:
v-model=“form.userInfo” 在回显的时候v-model绑定的值也必须是对象 && 对象中的属性必须包含 userId 与 value-key对应.

value-key="userId” 如果 Select 的绑定值为对象类型，请务必指定 value-key 作为它的唯一性标识。value-ley中绑定的属性对应:key中的属性.

:key="item.userId”

:value="item” 绑定的是对象, 则change事件中可以获取item中的所有属性.

​