选择

选择用于从选项集合中选择一个项目。

导入 # 


import Select from 'primevue/select';

基本 #

选择与v-model属性一起使用，用于双向值绑定以及options集合。选项的标签和值分别使用optionLabel和optionValue属性定义。请注意，当选项是简单的原始值（例如字符串数组）时，不需要optionLabel和optionValue。


<Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-56" />

表单 # 


<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full md:w-56">
    <div class="flex flex-col gap-1">
        <Select name="city" :options="cities" optionLabel="name" placeholder="Select a City" fluid />
        <Message v-if="$form.city?.invalid" severity="error" size="small" variant="simple">{{ $form.city.error.message }}</Message>
    </div>
    <Button type="submit" severity="secondary" label="Submit" />
</Form>

复选标记 #

高亮显示所选选项的另一种方法是显示复选标记。


<Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" checkmark :highlightOnSelect="false" class="w-full md:w-56" />

可编辑 #

当存在editable时，也可以通过键入输入内容。


<Select v-model="selectedCity" editable :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-56" />

分组 #

当提供嵌套数据结构时，可以对选项进行分组。要定义组的标签，需要optionGroupLabel属性，并且还需要optionGroupChildren来定义引用组子级的属性。


<Select v-model="selectedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Select a City" class="w-full md:w-56">
    <template #optiongroup="slotProps">
        <div class="flex items-center">
            <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`mr-2 flag flag-${slotProps.option.code.toLowerCase()}`" style="width: 18px" />
            <div>{{ slotProps.option.label }}</div>
        </div>
    </template>
</Select>

模板 #

选择通过模板提供了多个自定义插槽。


<Select v-model="selectedCountry" :options="countries" optionLabel="name" placeholder="Select a Country" class="w-full md:w-56">
    <template #value="slotProps">
        <div v-if="slotProps.value" class="flex items-center">
            <img :alt="slotProps.value.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`mr-2 flag flag-${slotProps.value.code.toLowerCase()}`" style="width: 18px" />
            <div>{{ slotProps.value.name }}</div>
        </div>
        <span v-else>
            {{ slotProps.placeholder }}
        </span>
    </template>
    <template #option="slotProps">
        <div class="flex items-center">
            <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`mr-2 flag flag-${slotProps.option.code.toLowerCase()}`" style="width: 18px" />
            <div>{{ slotProps.option.name }}</div>
        </div>
    </template>
    <template #dropdownicon>
        <i class="pi pi-map" />
    </template>
    <template #header>
        <div class="font-medium p-3">Available Countries</div>
    </template>
    <template #footer>
        <div class="p-3">
            <Button label="Add New" fluid severity="secondary" text size="small" icon="pi pi-plus" />
        </div>
    </template>
</Select>

筛选 #

选择提供内置的过滤功能，通过添加filter属性启用。


<Select v-model="selectedCountry" :options="countries" filter optionLabel="name" placeholder="Select a Country" class="w-full md:w-56">
    <template #value="slotProps">
        <div v-if="slotProps.value" class="flex items-center">
            <img :alt="slotProps.value.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`mr-2 flag flag-${slotProps.value.code.toLowerCase()}`" style="width: 18px" />
            <div>{{ slotProps.value.name }}</div>
        </div>
        <span v-else>
            {{ slotProps.placeholder }}
        </span>
    </template>
    <template #option="slotProps">
        <div class="flex items-center">
            <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`mr-2 flag flag-${slotProps.option.code.toLowerCase()}`" style="width: 18px" />
            <div>{{ slotProps.option.name }}</div>
        </div>
    </template>
</Select>

清除图标 #

启用showClear后，将添加一个清除图标以重置选择。


<Select v-model="selectedCity" :options="cities" showClear optionLabel="name" placeholder="Select a City" class="w-full md:w-56" />

加载状态 #

可以使用loading属性来使用加载状态。


<Select placeholder="Loading..." loading class="w-full md:w-56"></Select>

虚拟滚动 #

VirtualScroller 用于高效地渲染长选项列表，例如本演示中的 10 万条记录。配置是通过 virtualScrollerOptions 属性完成的，有关可用选项的更多信息，请参阅VirtualScroller，因为它在内部被选择使用。


<Select v-model="selectedItem" :options="items" optionLabel="label" optionValue="value"
    :virtualScrollerOptions="{ itemSize: 38 }" placeholder="Select Item" class="w-full md:w-56" />

懒加载虚拟滚动 # 


<Select v-model="selectedItem" :options="items" optionLabel="label" optionValue="value" class="w-full md:w-56"
    :virtualScrollerOptions="{ lazy: true, onLazyLoad: onLazyLoad, itemSize: 38, showLoader: true, loading: loading, delay: 250 }" placeholder="Select Item" />

填充 #

将 variant 属性指定为 filled，以显示比默认 outlined 样式具有更高视觉强调的组件。


<Select v-model="selectedCity" variant="filled" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-56" />

浮动标签 #

当获得焦点时，浮动标签会出现在输入字段的顶部。有关更多信息，请访问浮动标签文档。


<FloatLabel class="w-full md:w-56">
    <Select v-model="value1" inputId="over_label" :options="cities" optionLabel="name" class="w-full" />
    <label for="over_label">Over Label</label>
</FloatLabel>

<FloatLabel class="w-full md:w-56" variant="in">
    <Select v-model="value2" inputId="in_label" :options="cities" optionLabel="name" class="w-full" variant="filled" />
    <label for="in_label">In Label</label>
</FloatLabel>

<FloatLabel class="w-full md:w-56" variant="on">
    <Select v-model="value3" inputId="on_label" :options="cities" optionLabel="name" class="w-full" />
    <label for="on_label">On Label</label>
</FloatLabel>

Ifta 标签 #

IftaLabel 用于创建内嵌顶部对齐的标签。有关更多信息，请访问 IftaLabel 文档。


<IftaLabel>
    <Select v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full" variant="filled" />
    <label for="dd-city">City</label>
</IftaLabel>

尺寸 #

选择提供 small 和 large 尺寸作为基础的替代方案。


<Select v-model="value1" :options="cities" optionLabel="name" size="small" placeholder="Small" class="w-full md:w-56" />
<Select v-model="value2" :options="cities" optionLabel="name" placeholder="Normal" class="w-full md:w-56" />
<Select v-model="value3" :options="cities" optionLabel="name" size="large" placeholder="Large" class="w-full md:w-56" />

无效 #

使用 invalid 属性显示无效状态，以指示验证失败。在与表单验证库集成时，可以使用此样式。


<Select v-model="selectedCity1" :options="cities" optionLabel="name" placeholder="Select a City" :invalid="!selectedCity1" class="w-full md:w-56" />
<Select v-model="selectedCity2" :options="cities" optionLabel="name" placeholder="Select a City" :invalid="!selectedCity2" class="w-full md:w-56" variant="filled" />

已禁用 #

当存在 disabled 时，无法编辑和聚焦该元素。


<Select disabled placeholder="Select a City" class="w-full md:w-56" />

可访问性 #

屏幕阅读器

可以使用 aria-labelledby 或 aria-label 属性来描述组件的值。选择元素除了 aria-haspopup 和 aria-expanded 属性外，还具有 combobox 角色。如果启用了可编辑选项，还会添加 aria-autocomplete 属性。组合框和弹出窗口之间的关系是通过 aria-controls 创建的，aria-activedescendant 属性用于指示屏幕阅读器在弹出列表中的键盘导航期间读取哪个选项。

弹出列表的 ID 与 combobox 元素的 aria-controls 属性相关联，并使用 listbox 作为角色。每个列表项都具有 option 角色，一个与输入元素的 aria-activedescendant 匹配的 ID，以及 aria-label、aria-selected 和 aria-disabled 属性。

如果启用了过滤，可以定义 filterInputProps 来为过滤器输入元素提供 aria-* 属性。


<span id="dd1"></span>Options</span>
<select aria-labelledby="dd1" />

<select aria-label="Options" />

关闭状态下的键盘支持

按键功能
tab将焦点移动到选择元素。
空格打开弹出窗口，并将视觉焦点移动到选定的选项；如果没有选定选项，则将焦点移动到第一个选项。
回车打开弹出窗口，并将视觉焦点移动到选定的选项；如果没有选定选项，则将焦点移动到第一个选项。
向下箭头打开弹出窗口，并将视觉焦点移动到选定的选项；如果没有选定选项，则将焦点移动到第一个选项。
向上箭头打开弹出窗口，并将视觉焦点移动到选定的选项；如果没有选定选项，则将焦点移动到最后一个选项。
任何可打印字符打开弹出窗口，并将焦点移动到标签以键入的字符开头的选项；如果没有这样的选项，并且选择不是可编辑的，则将焦点移动到第一个选项。

弹出窗口的键盘支持

按键功能
tab将焦点移动到弹出窗口中的下一个可聚焦元素。如果没有可聚焦元素，则选择可聚焦选项并关闭覆盖层，然后将焦点移动到页面中的下一个元素。
shift + tab将焦点移动到弹出窗口中的上一个可聚焦元素。如果没有可聚焦元素，则选择可聚焦选项并关闭覆盖层，然后将焦点移动到页面中的下一个元素。
回车选择聚焦的选项并关闭弹出窗口，然后将焦点移动到选择元素。
空格选择聚焦的选项并关闭弹出窗口，然后将焦点移动到选择元素。
esc关闭弹出窗口，然后将焦点移动到选择元素。
向下箭头将焦点移动到下一个选项，如果没有下一个选项，则视觉焦点不会改变。
向上箭头将焦点移动到上一个选项，如果没有上一个选项，则视觉焦点不会改变。
alt + 向上箭头选择聚焦的选项并关闭弹出窗口，然后将焦点移动到选择元素。
向左箭头如果选择是可编辑的，则从当前选项中移除视觉焦点，并将输入光标向左移动一个字符。
向右箭头如果选择是可编辑的，则从当前选项中移除视觉焦点，并将输入光标向右移动一个字符。
home如果选择是可编辑的，则将输入光标移动到末尾；如果不是，则将焦点移动到第一个选项。
end如果选择是可编辑的，则将输入光标移动到开头；如果不是，则将焦点移动到最后一个选项。
pageUp将视觉焦点跳转到第一个选项。
pageDown将视觉焦点跳转到最后一个选项。
任何可打印字符如果选择不可编辑，则将焦点移动到标签以键入的字符开头的选项。

过滤器输入的键盘支持

按键功能
向下箭头将焦点移动到下一个选项，如果没有下一个选项，则视觉焦点不会改变。
向上箭头将焦点移动到上一个选项，如果没有上一个选项，则视觉焦点不会改变。
向左箭头从当前选项中移除视觉焦点，并将输入光标向左移动一个字符。
向右箭头从当前选项中移除视觉焦点，并将输入光标向右移动一个字符。
home将输入光标移动到末尾；如果不是，则将焦点移动到第一个选项。
end将输入光标移动到开头；如果不是，则将焦点移动到最后一个选项。
回车关闭弹出窗口，并将焦点移动到选择元素。
esc关闭弹出窗口，并将焦点移动到选择元素。
tab将焦点移动到弹出窗口中的下一个可聚焦元素。如果没有可聚焦元素，则选择可聚焦选项并关闭覆盖层，然后将焦点移动到页面中的下一个元素。
PrimeVue 4.2.5 on Vue 3 by PrimeTek