選擇列表

選擇列表用於在不同列表之間重新排序項目。

導入 #


import PickList from 'primevue/picklist';

基本 #

選擇列表需要一個多維陣列作為其值，並與 v-model 指令綁定，以及一個內容範本，該範本會透過 slotProps 取得 option 實例和索引。

沒有可用的選項沒有選取的項目


<PickList v-model="products" dataKey="id" breakpoint="1400px">
    <template #option="{ option  }">
        {{ option.name }}
    </template>
</PickList>

範本 #

若要支援自訂內容，請定義一個 option 範本，該範本會將項目實例作為參數取得。此外，還提供了 sourceheader 和 targetheader 插槽以供進一步自訂。

沒有可用的選項沒有選取的項目


<PickList v-model="products" dataKey="id" breakpoint="1400px" scrollHeight="20rem>
    <template #option="{ option , selected }">
        <div class="flex flex-wrap p-1 items-center gap-4 w-full">
            <img class="w-12 shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + option.image" :alt="option.name" />
            <div class="flex-1 flex flex-col">
                <span class="font-medium text-sm">{{ option.name }}</span>
                <span :class="['text-sm', { 'text-surface-500 dark:text-surface-400': !selected, 'text-inherit': selected }]">{{ option.category }}</span>
            </div>
            <span class="font-bold">${{ option.price }}</span>
        </div>
    </template>
</PickList>

輔助功能 #

螢幕閱讀器

可以使用 sourceListProps 和 targetListProps 透過傳遞 aria-labelledby 或 aria-label 屬性來提供描述來源列表框和目標列表框的值。列表元素具有 listbox 角色，並帶有 aria-multiselectable 屬性。每個列表項目都具有 option 角色，並帶有 aria-selected 作為其屬性。

控制按鈕是帶有 aria-label 的 button 元素，該 aria-label 預設是指 locale API 的 aria.moveTop、aria.moveUp、aria.moveDown、aria.moveBottom、aria.moveToTarget、aria.moveAllToTarget、aria.moveToSource 和 aria.moveAllToSource 屬性，或者您可以使用 moveTopButtonProps、moveUpButtonProps、moveDownButtonProps、moveToButtonProps、moveAllToButtonProps、moveFromButtonProps、moveFromButtonProps、moveAllFromButtonProps、moveToTargetProps、moveAllToTargetProps、moveToSourceProps 和 moveAllToSourceProps 來客製化按鈕，例如覆寫預設的 aria-label 屬性。


<span id="lb">Options</span>
<PickList aria-labelledby="lb" />

<PickList aria-label="City" />

列表框鍵盤支援

按鍵	功能
tab	將焦點移至第一個選取的選項，如果沒有，則第一個選項會接收焦點。
向上箭頭	將焦點移至前一個選項。
向下箭頭	將焦點移至下一個選項。
enter	切換焦點選項的選取狀態。
space	切換焦點選項的選取狀態。
home	將焦點移至第一個選項。
end	將焦點移至最後一個選項。
shift + 向下箭頭	將焦點移至下一個選項並切換選取狀態。
shift + 向上箭頭	將焦點移至前一個選項並切換選取狀態。
shift + space	選取最近選取的選項與焦點選項之間的項目。
control + shift + home	選取焦點選項和直到第一個選項的所有選項。
control + shift + end	選取焦點選項和直到最後一個選項的所有選項。
control + a	選取所有選項。

按鈕鍵盤支援

按鍵	功能
enter	執行按鈕動作。
space	執行按鈕動作。