Vue+Element UI el-select：子选项为空时如何选中分组及子项

我懂你的需求——想让el-select既能选择带子项分组里的子选项，也能直接选中没有子选项的空分组。默认的el-select-group确实只支持选择子选项，空分组因为没子项自然点不了，咱们可以通过自定义下拉模板来搞定这个问题。

下面是具体实现方案：

步骤1：调整数据源结构 #

给每个分组加一个唯一的groupValue字段，用来标识分组本身，这样选中分组时能绑定对应的值：

data() {
  return {
    options3: [
      { 
        label: 'Popular cities', 
        groupValue: 'popular-cities',
        options: [
          { value: 'Shanghai', label: 'Shanghai' }, 
          { value: 'Beijing', label: 'Beijing' }
        ] 
      },
      { 
        label: 'Indonesia', 
        groupValue: 'indonesia',
        options: [
          { value: 'Jakarta', label: 'Jakarta' }, 
          { value: 'Bandung', label: 'Bandung' }
        ] 
      },
      { label: 'Singapore', groupValue: 'singapore', options: [] },
      { label: 'Thailand', groupValue: 'thailand', options: [] }
    ],
    value7: ''
  }
}

步骤2：自定义下拉模板 #

用el-select的default插槽完全自定义下拉内容，把分组标题做成可点击的选项，同时保留子选项的展示：

<el-select v-model="value7" placeholder="Select" style="width: 200px">
  <template #default>
    <div v-for="group in options3" :key="group.groupValue">
      <!-- 把分组本身作为可选项 -->
      <el-option 
        :value="group.groupValue" 
        :label="group.label"
        style="font-weight: bold; padding-left: 10px;"
      />
      <!-- 有子选项时渲染子项列表 -->
      <el-option-group v-if="group.options.length > 0" :label="''">
        <el-option 
          v-for="item in group.options" 
          :key="item.value" 
          :label="item.label" 
          :value="item.value"
          style="padding-left: 30px;"
        />
      </el-option-group>
    </div>
  </template>
</el-select>

步骤3：优化选中显示（可选） #

如果想让选中分组和子选项的显示逻辑更统一，可以加个计算属性来处理：

computed: {
  selectedLabel() {
    if (!this.value7) return '';
    // 先判断是否选中的是分组
    const targetGroup = this.options3.find(group => group.groupValue === this.value7);
    if (targetGroup) return targetGroup.label;
    // 再判断是否选中的是子选项
    const targetItem = this.options3.flatMap(group => group.options).find(item => item.value === this.value7);
    return targetItem?.label || '';
  }
}

你可以把el-select的占位符换成这个计算属性，或者用插槽来展示，不过上面的模板已经能让选中后正确显示标签文本了，这步属于额外优化。

效果说明 #

• 空分组（Singapore、Thailand）现在可以直接点击选中
• 带子项的分组（Popular cities、Indonesia）既能选分组本身，也能选下面的子选项
• 选中后会正确显示对应的标签文本

核心思路就是把分组本身也当作一个el-option来处理，打破默认el-select-group只能选子项的限制。

内容的提问来源于stack exchange，提问作者dede.brahma