elementUI el-select组件 v-model为对象时的回显问题

  最近在写一个需求，需要在一个表单内选中某个用户，然后传递他的所有信息。在由内容编辑时，需要向内部传值，此时出现了显示为空值的问题，且再次选中也没有刷新页面。后来我写了一个简单的demo如下。

<template>
  <div>
    <el-select v-model="selectedValue" value-key="name" placeholder="请选择">
      <el-option
        v-for="item in tableData"
        :key="item.name"
        :label="item.name"
        :value="item"
      >
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedValue: "",
      tableData: [
        {
          name: "王一虎",
        },
        {
          name: "王二虎",
        },
        {
          name: "王三虎",
        },
      ],
    };
  },
  mounted() {
    this.selectedValue = {
      name: "王大虎",
    };
  },
};
</script>

  结果就是，不管我给 selectedValue 如何赋值都没用，问题在于：这个赋的值并不在原本的数组中，所以无法回显。当我们设置的值在原本的数组中时，就能回显成功了。

 this.selectedValue = {
      name: "王二虎",
 };

总结下来就是：

• 所赋的值一定要原本就在数组中存在，但是有些业务中，此时搜索数组是空的，我们可以手动往内部添加这个值来达到回显的功能。
• 如果回显成功以后，点击选中没有更新视图，需要添加@change="$forceUpdate()"
• 还有需要注意的点就是，属性的数据类型一定要相同才能回显。比如某个属性数组中是String，赋值时却是Number，也是无法成功的