ElementUI下拉框选择后不显示值问题及解决

<!--下拉框-->
<el-form-item label="用户角色" prop="role">
   <el-select v-model="editModel.role" :placeholder="selectPlaceholder" @change="handleChange">
      <el-option v-for="item in roleList" :key="item.id" :label="item.roleName" :value="item.id">
      </el-option>
   </el-select>
</el-form-item>

// 手动刷新
handleChange() {
    this.$forceUpdate()
}

// 操作下拉框选中事件
handleChange(val) {
  // val 代表 value 值
  if (val) {
    // 操作选中角色发生变化
    this.$set(this.editModel, this.editModel.role, val)
  } else {
    this.$set(this.editModel, this.editModel.role, '')
  }
}

<el-select v-model="department.manager" placeholder="请选择">
    <el-option
        v-for="item in employees"
        :key="item.id"
        :label="item.username"
        :value="item">
        <span style="float: left">{{ item.username }}</span>
        <span style="float: right; color: #8492a6; font-size: 13px">{{ item.email }}</span>
       </el-option>
</el-select>

<el-select v-model="department.manager.username" placeholder="请选择">
    <el-option
        v-for="item in employees"
        :key="item.id"
        :label="item.username"
        :value="item.username">
        <span style="float: left">{{ item.username }}</span>
        <span style="float: right; color: #8492a6; font-size: 13px">{{ item.email }}</span>
       </el-option>
</el-select>

<el-select v-model="department.manager" placeholder="请选择" value-key="id">
   <el-option
       v-for="item in employees"
       :key="item.id"
       :label="item.username"
       :value="item">
     <span style="float: left">{{ item.username }}</span>
     <span style="float: right; color: #8492a6; font-size: 13px">{{ item.email }}</span>
   </el-option>
</el-select>