Vue+Element UI下拉框默认显示首个匹配值问题求助

问题场景 #

当前用Element UI的el-select做了带分组的下拉框，common states和all states分组里有同名选项（比如Texas）。选中common states里的Texas后，打开下拉框时高亮的却是all states里的Texas——因为两个选项的value都是字符串"Texas"，Element UI会匹配第一个值相同的选项，但实际想要的是高亮选中的那个分组内的对应选项。

解决方案 #

核心是让每个选项的value具备唯一性，通过给value加分组标识（用对象代替字符串），让Element UI能精准区分不同分组的同名选项，具体步骤：

• 把选项的value从字符串改成包含名称和分组标识的对象，确保每个选项的value唯一
• 给el-select加value-key="name"属性，指定用对象里的name字段作为显示文本
• 保持选项的label绑定不变，不影响前端显示

完整代码示例 #

<template>
  <div>
    <el-select 
      v-model="selectedState" 
      placeholder="Select a state"
      value-key="name"
    >
      <el-option-group label="common states">
        <el-option
          v-for="item in commonStates"
          :label="item"
          :key="item + '_common'"
          :value="{ name: item, group: 'common' }"
        ></el-option>
      </el-option-group>
      <el-option-group label="all states">
        <el-option
          v-for="item in allStates"
          :label="item"
          :key="item + '_all'"
          :value="{ name: item, group: 'all' }"
        ></el-option>
      </el-option-group>
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedState: "",
      commonStates: ["California", "New York", "Florida", "Texas", "Hawaii"],
      allStates: [
        "Alabama",
        "Alaska",
        "Arizona",
        "Arkansas",
        "California",
        ".....",
        "Washington",
        "West Virginia",
        "Wisconsin",
        "Wyoming"
      ]
    };
  }
};
</script>

说明 #

修改后，每个选项的value是唯一对象（比如common分组的Texas对应{ name: 'Texas', group: 'common' }），选中该选项时v-model会存储这个对象。打开下拉框时，Element UI会根据value精准匹配到对应选项，从而高亮common分组内的Texas，而非all分组的同名选项。后续要获取选中的州名称，直接取selectedState.name即可。

内容的提问来源于stack exchange，提问作者ChrisLimbe