Vue Element分组多选下拉框：每组仅选一项的实现求助

要实现每个分组只能选一个选项的需求，核心思路是监听选中值的变化，每次选择后过滤掉同分组下的重复选中项，具体实现步骤如下：

1. 完善数据源结构 #

给每个分组添加唯一标识（比如groupKey），方便后续快速判断选项所属分组：

data() {
  return {
    value: [],
    options: [
      {
        label: '客户组',
        groupKey: 'customer', // 分组唯一标识
        options: [
          { label: '客户A', value: 'customer_a' },
          { label: '客户B', value: 'customer_b' }
        ]
      },
      {
        label: '部门组',
        groupKey: 'department', // 分组唯一标识
        options: [
          { label: '部门1', value: 'dept_1' },
          { label: '部门2', value: 'dept_2' }
        ]
      }
    ]
  }
}

2. 绑定change事件处理选中逻辑 #

在el-select上添加@change事件，每次选中值变化时执行过滤逻辑：

<el-select v-model="value" multiple filterable placeholder="Filters" @change="handleSelectChange">
  <el-option-group
      v-for="group in options"
      :key="group.groupKey"
      :label="group.label">
    <el-option
        v-for="item in group.options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
    </el-option>
  </el-option-group>
</el-select>

3. 实现过滤函数 #

在methods里写handleSelectChange函数，遍历选中值，确保每个分组只保留最后选中的选项：

methods: {
  handleSelectChange(selectedValues) {
    // 建立映射：分组key -> 该分组最后选中的value
    const groupValueMap = {}
    
    // 遍历选中值，后面选中的会覆盖前面同分组的，保证保留最后选的
    selectedValues.forEach(val => {
      // 找到当前value所属的分组
      const targetGroup = this.options.find(group => 
        group.options.some(item => item.value === val)
      )
      if (targetGroup) {
        groupValueMap[targetGroup.groupKey] = val
      }
    })
    
    // 把映射转成数组，就是最终的选中值
    this.value = Object.values(groupValueMap)
  }
}

额外优化：禁止同组重复选中的视觉提示（可选） #

如果想让用户更直观地知道同组只能选一个，可以给已选分组的其他选项添加禁用状态：
给el-option添加:disabled属性，判断当前选项所在分组是否已有选中项：

<el-option
    v-for="item in group.options"
    :key="item.value"
    :label="item.label"
    :value="item.value"
    :disabled="this.value.some(val => {
      const valGroup = this.options.find(g => g.options.some(i => i.value === val))
      return valGroup?.groupKey === group.groupKey && val !== item.value
    })">
</el-option>

这样用户选中某分组的一个选项后，同组其他选项会变成禁用状态，从交互上直接限制了重复选择，体验更友好。

内容的提问来源于stack exchange，提问作者rob-roibu