排序列表

排序列表用于对集合进行排序。

导入 #


import OrderList from 'primevue/orderlist';

基础 #

排序列表需要一个数组作为其值，通过 v-model 指令绑定，并使用 option 模板来显示其内容。

没有可用的选项没有选择的项目


<OrderList v-model="products" dataKey="id" breakpoint="575px" pt:pcListbox:root="w-full sm:w-56">
    <template #option="{ option }">
        {{ option.name }}
    </template>
</OrderList>

模板 #

对于自定义内容支持，定义一个 option 模板，该模板将项目实例作为参数。此外，还提供了 header 插槽以进行进一步的自定义。

没有可用的选项没有选择的项目


<OrderList v-model="products" dataKey="id" breakpoint="575px" 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 sm:ml-8">${{ option.price }}</span>
        </div>
    </template>
</OrderList>

可访问性 #

屏幕阅读器

可以使用 listProps 通过传递 aria-labelledby 或 aria-label 属性来提供描述列表框的值。列表元素具有 listbox 角色以及 aria-multiselectable 属性。每个列表项都具有 option 角色，其属性为 aria-selected 和 aria-disabled。

控件按钮是 button 元素，其 aria-label 默认引用 locale API 的 aria.moveTop、aria.moveUp、aria.moveDown 和 aria.moveBottom 属性，或者您可以使用 moveTopButtonProps、moveUpButtonProps、moveDownButtonProps 和 moveBottomButtonProps 来自定义按钮，例如覆盖默认的 aria-label 属性。


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

<OrderList aria-label="City" />

列表框键盘支持

键	功能
tab	将焦点移动到第一个选定的选项，如果没有选定的选项，则第一个选项接收焦点。
向上箭头	将焦点移动到上一个选项。
向下箭头	将焦点移动到下一个选项。
enter	切换焦点选项的选定状态。
空格	切换焦点选项的选定状态。
home	将焦点移动到第一个选项。
end	将焦点移动到最后一个选项。
shift + 向下箭头	将焦点移动到下一个选项并切换选择状态。
shift + 向上箭头	将焦点移动到上一个选项并切换选择状态。
shift + 空格	选择最近选择的选项和焦点选项之间的项目。
control + shift + home	选择焦点选项以及直到第一个选项的所有选项。
control + shift + end	选择焦点选项以及直到第一个选项的所有选项。
control + a	选择所有选项。

按钮键盘支持

键	功能
enter	执行按钮操作。
空格	执行按钮操作。