如何让PrimeVue分组Dropdown的空组父项可选中

PrimeVue的Dropdown默认把分组标题设为不可点击状态，要实现空组的国家可直接选中，得从数据源处理和自定义模板两个地方入手，以下是具体实现步骤：

1. 预处理数据源 #

把items为空的国家从分组项转成普通可选项，同时保留有子城市的国家作为分组。用计算属性来动态处理数据：

<script setup>
import { ref, computed } from "vue";
import Dropdown from 'primevue/dropdown';

const selectedCity = ref();
const rawCities = ref([
    {
        label: 'Germany',
        code: 'DE',
        items: [
            { label: 'Berlin', value: 'Berlin' },
            { label: 'Frankfurt', value: 'Frankfurt' },
            { label: 'Hamburg', value: 'Hamburg' },
            { label: 'Munich', value: 'Munich' }
        ]
    },
    {
        label: 'USA',
        code: 'US',
        items: [
            { label: 'Chicago', value: 'Chicago' },
            { label: 'Los Angeles', value: 'Los Angeles' },
            { label: 'New York', value: 'New York' },
            { label: 'San Francisco', value: 'San Francisco' }
        ]
    },
    {
        label: 'Japan',
        code: 'JP',
        items: [
            { label: 'Kyoto', value: 'Kyoto' },
            { label: 'Osaka', value: 'Osaka' },
            { label: 'Tokyo', value: 'Tokyo' },
            { label: 'Yokohama', value: 'Yokohama' }
        ]
    },
    {
        label: 'Myanmar',
        code: 'MM',
        items: []
    }
]);

// 拆分空组国家为独立选项，保留有子项的作为分组
const groupedCities = computed(() => {
    const groups = [];
    const standaloneCountries = [];
    
    rawCities.value.forEach(item => {
        if (item.items.length === 0) {
            // 空组转成可选项，用前缀区分国家和城市（避免重名冲突）
            standaloneCountries.push({
                label: item.label,
                value: `country_${item.code}`
            });
        } else {
            groups.push(item);
        }
    });
    
    // 合并独立选项和分组，顺序可以自己调整
    return [...standaloneCountries, ...groups];
});
</script>

2. 自定义选项模板 #

用option插槽自定义下拉选项的渲染逻辑，让空组国家变成可点击的选项，同时保留分组的样式：

<template>
    <div class="card flex justify-content-center">
        <Dropdown 
            v-model="selectedCity" 
            :options="groupedCities" 
            optionLabel="label" 
            optionGroupLabel="label"
            optionGroupChildren="items" 
            placeholder="Select a City or Country" 
            class="w-full md:w-14rem"
            :option="(opt) => opt.label" // 选中后直接显示标签文本
        >
            <template #option="slotProps">
                <!-- 分组标题：保持原样式 -->
                <div v-if="slotProps.option.items" class="p-2 font-bold text-gray-700">
                    {{ slotProps.option.label }}
                </div>
                <!-- 可选项（包括城市和空组国家）：添加点击选中逻辑 -->
                <div v-else class="p-2 hover:bg-gray-100 cursor-pointer" 
                     @click="selectedCity = slotProps.option.value">
                    {{ slotProps.option.label }}
                </div>
            </template>
        </Dropdown>
    </div>
</template>

关键说明 #

• 给空组国家的value加前缀country_是为了区分城市和国家，避免出现名称重复导致的冲突，如果不需要可以直接用item.code作为value。
• 如果想把空组国家放在所有分组后面，只需要调整计算属性的返回顺序为[...groups, ...standaloneCountries]。
• 自定义模板里的@click事件直接绑定选中值，绕过了分组标题不可点击的限制。

这样修改后，Myanmar就能被正常选中，选中后下拉框也会正确显示"Myanmar"。

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