階層式選擇

階層式選擇是一個表單元件，用於從巢狀選項結構中選擇值。

導入 # 


import CascadeSelect from 'primevue/cascadeselect';

基本 #

階層式選擇與v-model屬性一起使用，進行雙向值綁定，以及options集合。要定義群組的標籤，需要optionGroupLabel屬性，並且也需要optionGroupChildren來定義引用群組子項的屬性。請注意，optionGroupChildren的順序很重要，因為它應該對應於資料層次結構。

選擇城市
有 3 個結果可用

<CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
    :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />

表單 #

階層式選擇與PrimeVue 表單程式庫無縫整合。

選擇城市
有 3 個結果可用

<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="Select a City" />
        <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>

範本 #

階層式選擇透過範本提供多個自訂插槽。

選擇城市
有 3 個結果可用

<CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
    :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City">
    <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">Available Countries</div>
    </template>
    <template #footer>
        <div class="px-3 py-1">
            <Button label="Add New" fluid severity="secondary" text size="small" icon="pi pi-plus" />
        </div>
    </template>
</CascadeSelect>

載入狀態 #

可以使用 loading 屬性來設定載入狀態。

載入中...
找不到結果

<CascadeSelect loading placeholder="Loading..." class="w-56" />

清除圖示 #

啟用 showClear 時，會新增一個清除圖示來重設階層式選擇。

選擇城市
有 3 個結果可用

<CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
    :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />

已填滿 #

指定 variant 屬性為 filled，以使用比預設 outlined 樣式更高的視覺強調來顯示元件。

選擇城市
有 3 個結果可用

<CascadeSelect v-model="selectedCity" variant="filled" :options="countries" optionLabel="cname" optionGroupLabel="name"
    :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />

浮動標籤 #

當焦點在輸入欄位時，浮動標籤會出現在輸入欄位上方。請瀏覽浮動標籤文件以取得更多資訊。

p-空標籤
有 3 個結果可用
p-空標籤
有 3 個結果可用
p-空標籤
有 3 個結果可用

<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">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">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">On Label</label>
</FloatLabel>

輸入欄位標籤 #

輸入欄位標籤用於建立欄位內頂部對齊的標籤。請瀏覽輸入欄位標籤文件以取得更多資訊。

p-空標籤
有 3 個結果可用

<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">City</label>
</IftaLabel>

尺寸 #

階層式選擇提供 small 和 large 尺寸，作為基本尺寸的替代方案。

小型
有 3 個結果可用
一般
有 3 個結果可用
大型
有 3 個結果可用

<CascadeSelect v-model="value1" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" 
    class="w-56" size="small" placeholder="Small" />
<CascadeSelect v-model="value2" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" 
    class="w-56" placeholder="Normal" />
<CascadeSelect v-model="value3" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" 
    class="w-56" size="large" placeholder="Large" />

無效 #

無效狀態使用 invalid 屬性顯示，以指示驗證失敗。當與表單驗證程式庫整合時，可以使用此樣式。

選擇城市
有 3 個結果可用
選擇城市
有 3 個結果可用

<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="Select a City" />
    <CascadeSelect v-model="selectedCity2" :invalid="!selectedCity2" :options="countries" optionLabel="cname" optionGroupLabel="name" 
        :optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City" variant="filled" />
</div>

已停用 #

當存在 disabled 時，該元素無法編輯和聚焦。

已停用
找不到結果

<CascadeSelect disabled placeholder="Disabled" class="w-56" />

輔助功能 #

螢幕閱讀器

描述元件的值可以使用 aria-labelledby 或 aria-label 屬性提供。階層式選擇元素除了 aria-haspopup 和 aria-expanded 屬性外，還具有 combobox 角色。combobox 和彈出視窗之間的關係是使用 aria-controls 建立的，該屬性引用彈出視窗的 id。

彈出清單有一個 id，該 id 引用 combobox 元素的 aria-controls 屬性，並使用 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 (Enter 鍵)開啟彈出視窗，並將視覺焦點移至選定的選項；若無選定選項，則焦點移至第一個選項。
向下箭頭開啟彈出視窗，並將視覺焦點移至選定的選項；若無選定選項，則焦點移至第一個選項。
向上箭頭開啟彈出視窗，並將視覺焦點移至選定的選項；若無選定選項，則焦點移至最後一個選項。
任何可列印的字元開啟彈出視窗，並將焦點移至標籤以輸入字元開頭的選項；若無符合的選項，則焦點移至第一個選項。

彈出視窗鍵盤支援

按鍵功能
tab隱藏彈出視窗，並將焦點移至下一個可使用 Tab 鍵切換焦點的元素。若無下一個元素，則選取目前焦點選項並關閉覆蓋層，接著將焦點移至頁面中的下一個元素。
shift + tab隱藏彈出視窗，並將焦點移至上一個可使用 Tab 鍵切換焦點的元素。
enter (Enter 鍵)選取焦點選項並關閉彈出視窗。
space (空白鍵)選取焦點選項並關閉彈出視窗。
escape (Esc 鍵)關閉彈出視窗，並將焦點移至聯級選擇 (cascadeselect) 元素。
向下箭頭將焦點移至下一個選項。
向上箭頭將焦點移至上一個選項。
alt + 向上箭頭選取焦點選項並關閉彈出視窗，接著將焦點移至聯級選擇 (cascadeselect) 元素。
向右箭頭若選項是關閉的，則開啟選項；否則將焦點移至第一個子選項。
向左箭頭若選項是開啟的，則關閉選項；否則將焦點移至父選項。
home (Home 鍵)將輸入游標移至結尾；若輸入游標不在結尾，則將焦點移至第一個選項。
end (End 鍵)將輸入游標移至開頭；若輸入游標不在開頭，則將焦點移至最後一個選項。
任何可列印的字元將焦點移至標籤以輸入字元開頭的選項。
PrimeVue 4.2.5 on Vue 3 by PrimeTek