CascadeSelect 是一个表单组件，用于从嵌套的选项结构中选择值。
import CascadeSelect from 'primevue/cascadeselect';
CascadeSelect 与 v-model 属性一起使用，通过 options 集合实现双向值绑定。要定义组的标签，需要 optionGroupLabel 属性，同时需要 optionGroupChildren 来定义引用组子项的属性。请注意 optionGroupChildren 的顺序很重要，因为它应该对应数据层次结构。
<CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" class="w-56" placeholder="选择城市" />
CascadeSelect 与 PrimeVue Forms 库无缝集成。
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4">
<div class="flex flex-col gap-1">
<CascadeSelect name="city" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="选择城市" />
<Message v-if="$form.city?.invalid" severity="error" size="small" variant="simple">{{ $form.city.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="提交" />
</Form>
CascadeSelect 通过模板提供多个插槽用于自定义。
<CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" class="w-56" placeholder="选择城市">
<template #option="slotProps">
<div class="flex items-center">
<img v-if="slotProps.option.states" :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${slotProps.option.code.toLowerCase()} mr-2`" style="width: 18px" />
<i v-if="slotProps.option.cities" class="pi pi-compass mr-2"></i>
<i v-if="slotProps.option.cname" class="pi pi-map-marker mr-2"></i>
<span>{{ slotProps.option.cname || slotProps.option.name }}</span>
</div>
</template>
<template #dropdownicon>
<i class="pi pi-map" />
</template>
<template #header>
<div class="font-medium px-3 py-2">可用国家</div>
</template>
<template #footer>
<div class="px-3 py-1">
<Button label="添加新项" fluid severity="secondary" text size="small" icon="pi pi-plus" />
</div>
</template>
</CascadeSelect>
Loading state can be used loading property.
<CascadeSelect loading placeholder="Loading..." class="w-56" />
When showClear is enabled, a clear icon is added to reset the CascadeSelect.
<CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
将 variant 属性指定为 filled 以显示比默认 outlined 样式具有更高视觉强调的组件。
<CascadeSelect v-model="selectedCity" variant="filled" :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" class="w-56" placeholder="选择城市" />
当获得焦点时，浮动标签会出现在输入字段的顶部。访问 FloatLabel 文档了解更多信息。
<FloatLabel class="w-full md:w-56">
<CascadeSelect v-model="value1" inputId="over_label" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" />
<label for="over_label">上方标签</label>
</FloatLabel>
<FloatLabel class="w-full md:w-56">
<CascadeSelect v-model="value2" inputId="in_label" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" variant="filled" />
<label for="in_label">内部标签</label>
</FloatLabel>
<FloatLabel class="w-full md:w-56">
<CascadeSelect v-model="value3" inputId="on_label" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" />
<label for="on_label">表面标签</label>
</FloatLabel>
IftaLabel 用于创建字段内顶部对齐的标签。访问 IftaLabel 文档了解更多信息。
<IftaLabel class="w-full md:w-56">
<CascadeSelect v-model="selectedCity" inputId="cs_city" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" variant="filled" />
<label for="cs_city">城市</label>
</IftaLabel>
CascadeSelect 提供 small 和 large 尺寸作为基础尺寸的替代选项。
<CascadeSelect v-model="value1" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']"
class="w-56" size="small" placeholder="小尺寸" />
<CascadeSelect v-model="value2" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']"
class="w-56" placeholder="正常尺寸" />
<CascadeSelect v-model="value3" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']"
class="w-56" size="large" placeholder="大尺寸" />
使用 invalid 属性显示无效状态以指示验证失败。在与表单验证库集成时可以使用此样式。
<div class="card flex flex-wrap justify-center gap-4">
<CascadeSelect v-model="selectedCity1" :invalid="!selectedCity1" :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="选择城市" />
<CascadeSelect v-model="selectedCity2" :invalid="!selectedCity2" :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="选择城市" variant="filled" />
</div>
当存在 disabled 属性时，元素无法编辑和获得焦点。
<CascadeSelect disabled placeholder="已禁用" class="w-56" />
描述组件的值可以通过 aria-labelledby 或 aria-label 属性提供。cascadeselect 元素除了具有 aria-haspopup 和 aria-expanded 属性外，还具有 combobox 角色。 组合框和弹出窗口之间的关系通过引用弹出窗口 id 的 aria-controls 创建。
弹出列表具有引用 combobox 元素的 aria-controls 属性的 id，并使用 tree 作为角色。每个列表项都具有 treeitem 角色以及 aria-label、aria-selected 和 aria-expanded 属性。树节点的容器元素具有 group 角色。aria-setsize、aria-posinset 和 aria-level 属性会被隐式计算并添加到每个树项中。
<span id="dd1"></span>Options</span>
<CascadeSelect aria-labelledby="dd1" />
<CascadeSelect aria-label="Options" />
| 按键 | 功能 |
|---|---|
| tab | 将焦点移动到 cascadeselect 元素。 |
| space | 打开弹出窗口并将视觉焦点移动到选定的选项，如果没有选定项则第一个选项获得焦点。 |
| enter | Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus. |
| down arrow | Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus. |
| up arrow | 打开弹出窗口并将视觉焦点移动到选定的选项，如果没有选定项则最后一个选项获得焦点。 |
| any printable character | 打开弹出窗口并将焦点移动到标签以输入字符开头的选项，如果没有则第一个选项获得焦点。 |
| 按键 | 功能 |
|---|---|
| tab | 隐藏弹出窗口并将焦点移动到下一个可制表元素。如果没有，则选择可聚焦选项并关闭覆盖层，然后将焦点移动到页面中的下一个元素。 |
| shift + tab | 隐藏弹出窗口并将焦点移动到上一个可制表元素。 |
| enter | 选择聚焦的选项并关闭弹出窗口。 |
| space | Selects the focused option and closes the popup. |
| escape | 关闭弹出窗口，将焦点移动到 cascadeselect 元素。 |
| down arrow | 将焦点移动到下一个选项。 |
| up arrow | 将焦点移动到上一个选项。 |
| alt + up arrow | 选择聚焦的选项并关闭弹出窗口，然后将焦点移动到 cascadeselect 元素。 |
| right arrow | 如果选项已关闭，则打开选项，否则将焦点移动到第一个子选项。 |
| left arrow | 如果选项已打开，则关闭选项，否则将焦点移动到父选项。 |
| home | 将输入光标移动到末尾，如果没有则将焦点移动到第一个选项。 |
| end | 将输入光标移动到开头，如果没有则将焦点移动到最后一个选项。 |
| any printable character | 将焦点移动到标签以输入字符开头的选项。 |