Vue.js + Element Plus：如何区分el-select选中的不同选项

我需要实现一个下拉选择器，包含三个选项：

• 第一个选项的值由autoGender(index)方法返回，结果为'Father'或'Mother'
• 第二个选项固定为'Father'
• 第三个选项固定为'Mother'

对应的代码如下：

<el-select :value="list['gender']" @change="setGender($event)">
  <el-option :value="autoGender(index)">{{autoGender(index)}}</el-option>
 <el-option :value="'Father'">Father</el-option>
 <el-option :value="'Mother'">Mother</el-option>
</el-select>

由于无法修改list['gender']，请问在setGender方法中，如何区分用户选中的是下拉菜单中的哪一个选项？尝试过event.target.key但无效，当前使用Element Plus组件库。

解决方案 #

Element Plus的el-select默认change事件仅返回选中项的value，但这里存在value重复的情况，因此需要通过给选项标记唯一标识+使用select事件来区分：

步骤1：给每个选项添加唯一key并替换事件 #

给每个el-option设置唯一的key属性，同时将@change替换为@select事件——该事件会返回完整的选中项对象，包含我们设置的key：

<el-select :value="list['gender']" @select="setGender($event)">
  <el-option 
    :value="autoGender(index)" 
    :key="'auto-' + autoGender(index)"
  >{{autoGender(index)}}</el-option>
 <el-option :value="'Father'" :key="'fixed-father'">Father</el-option>
 <el-option :value="'Mother'" :key="'fixed-mother'">Mother</el-option>
</el-select>

步骤2：在setGender方法中区分选项 #

通过返回的选项对象的key属性，就能精准判断用户选中的是哪一个选项：

function setGender(selectedOption) {
  // 根据key区分选中的选项类型
  switch(selectedOption.key) {
    case `auto-${autoGender(index)}`:
      // 处理第一个自动生成选项的逻辑
      break;
    case 'fixed-father':
      // 处理固定Father选项的逻辑
      break;
    case 'fixed-mother':
      // 处理固定Mother选项的逻辑
      break;
  }
  // 若需要更新值，依然可以通过selectedOption.value获取
  // list['gender'] = selectedOption.value;
}

备选方案：自定义属性+查找选项 #

如果不想替换@change事件，也可以给选项添加自定义属性，再通过$refs查找对应选项：

<el-select :value="list['gender']" @change="setGender($event)" ref="genderSelect">
  <el-option 
    :value="autoGender(index)" 
    data-type="auto"
  >{{autoGender(index)}}</el-option>
 <el-option :value="'Father'" data-type="fixed-father">Father</el-option>
 <el-option :value="'Mother'" data-type="fixed-mother">Mother</el-option>
</el-select>

对应的方法实现：

function setGender(value) {
  const selectRef = this.$refs.genderSelect;
  const selectedOption = selectRef.options.find(opt => opt.value === value);
  if (selectedOption) {
    const optionType = selectedOption.getAttribute('data-type');
    // 根据optionType区分选项逻辑
  }
}

推荐使用@select事件的方案，更贴合Element Plus组件的设计逻辑，代码更简洁直观。

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