选择

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

导入 # 


import Select from 'primevue/select';

基本 #

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" />

复选标记 #

突出显示所选选项的另一种方法是显示复选标记而不是。


<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>

模板 #

选项和所选选项显示支持使用 option 和 value 分别进行模板化。


<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>
</Select>

筛选器 #

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。


<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 用于有效地渲染长的选项列表，例如此演示中的 100K 记录。配置使用 virtualScrollerOptions 属性完成，有关可用选项的更多信息，请参考 VirtualScroller，因为它在 Select 内部使用。


<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" />

浮动标签 #

浮动标签在聚焦时显示在输入字段的顶部。访问 FloatLabel 文档以获取更多信息。


<FloatLabel class="w-full md:w-56">
    <Select v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full" />
    <label for="dd-city">Select a City</label>
</FloatLabel>

填充 #

将 variant 属性指定为 filled 以以比默认 outlined 样式更高的视觉重点显示组件。


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

无效 #

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


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

禁用 #

当存在 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将焦点移动到选择元素。
space打开弹出窗口并将视觉焦点移动到所选选项，如果没有，则第一个选项获得焦点。
enter打开弹出窗口并将视觉焦点移动到所选选项，如果没有，则第一个选项获得焦点。
下箭头打开弹出窗口并将视觉焦点移动到所选选项，如果没有，则第一个选项获得焦点。
上箭头打开弹出窗口并将视觉焦点移动到所选选项，如果没有，则最后一个选项获得焦点。
任何可打印字符打开弹出窗口并将焦点移动到标签以所输入字符开头的选项，如果没有，并且选择不可编辑，则第一个选项获得焦点。

弹出窗口键盘支持

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

如果选择不可编辑，则将焦点移动到标签以所输入字符开头的选项。

键功能
下箭头关闭弹出窗口，然后将焦点移动到选择元素。
上箭头下箭头
左箭头筛选器输入键盘支持
右箭头左箭头
home右箭头
endhome
enterend
escapeend
tabtab
从当前选项中移除视觉焦点，并将输入光标移动到右面一个字符。