树选择

TreeSelect 是一个表单组件，用于从分层数据中进行选择。

导入 # 


import TreeSelect from 'primevue/treeselect';

基本 #

TreeSelect 与 v-model 属性一起使用，用于双向值绑定，以及 options 集合。内部使用Tree 组件，因此选项模型基于 TreeNode API。

在单选模式下，值绑定应为节点的key值。

选择项目

<TreeSelect v-model="selectedValue" :options="nodes" placeholder="Select Item" class="md:w-80 w-full" />

表单 #

TreeSelect 与 v-model 属性一起使用。

选择项目

<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full md:w-80">
    <div class="flex flex-col gap-1">
        <TreeSelect name="node" :options="nodes" placeholder="Select Item" fluid />
        <Message v-if="$form.node?.invalid" severity="error" size="small" variant="simple">{{ $form.node.error?.message }}</Message>
    </div>
    <Button type="submit" severity="secondary" label="Submit" />
</Form>

多选 #

通过将 selectionMode 设置为 multiple，可以选择多个节点。默认情况下，在多选模式下，无需按住 metaKey（例如 ⌘）即可添加到现有选择。当存在可选的 metaKeySelection 时，行为会更改，即选择新节点需要存在 meta 键。请注意，在支持触摸的设备上，TreeSelect 始终忽略 metaKey。

在多选模式下，值绑定应为键值对，其中键为节点键，值为布尔值，指示是否选择。


{
    '0-0': true,
    '0-1-0': true
}
选择项目

<TreeSelect v-model="selectedValue" :options="nodes" selectionMode="multiple" display="chip" :maxSelectedLabels="3" placeholder="Select Items" class="md:w-80 w-full" />

复选框 #

通过将 selectionMode 配置为 checkbox，可以启用通过复选框选择多个节点。

在复选框选择模式下，值绑定应为键值对，其中键为节点键，值是一个具有 checked 和 partialChecked 属性的对象，表示节点对象的选中状态，以指示选择。


{
    '0-0': {
        partialChecked: false,
        checked: true
    }
}
选择项目

<TreeSelect v-model="selectedValue" :options="nodes" selectionMode="checkbox" placeholder="Select Item" class="md:w-80 w-full" />

懒加载 #

当处理大型数据集时，延迟加载非常有用，在此示例中，使用 loading 属性和 node-expand 方法按需动态加载节点。loadingMode 的默认值为 mask，并且还提供 icon。

选择项目
选择项目

<TreeSelect v-model="selectedValue" :loading="loading" :options="nodes" @node-expand="onNodeExpand" placeholder="Select Item" class="md:w-80 w-full" />
<TreeSelect v-model="selectedValue2" loadingMode="icon" :options="nodes2" @node-expand="onNodeExpand2" placeholder="Select Item" class="md:w-80 w-full" />

筛选 #

通过添加 filter 属性启用筛选，默认情况下，使用节点的标签属性与文本字段中的值进行比较，为了自定义在搜索期间应使用哪些字段，请定义 filterBy 属性。此外，filterMode 指定筛选策略。在 lenient 模式下，当查询匹配某个节点时，不会进一步搜索该节点的子项，因为该节点的所有后代都包含在内。另一方面，在 strict 模式下，当查询匹配某个节点时，筛选将继续对所有后代进行。

选择项目
选择项目

<TreeSelect v-model="selectedValue" filter filterMode="lenient" :options="nodes" placeholder="Select Item" class="md:w-80 w-full" />
<TreeSelect v-model="selectedValue" filter filterMode="strict" :options="nodes" placeholder="Select Item" class="md:w-80 w-full" />

清除图标 #

启用 showClear 后，会添加一个清除图标以重置 TreeSelect。

选择项目

<TreeSelect v-model="selectedValue" :options="nodes" placeholder="Select Item" class="md:w-80 w-full" />

模板 #

TreeSelect 通过模板提供多个插槽以进行自定义。

选择项目

<TreeSelect v-model="selectedValue" :options="nodes" placeholder="Select Item" class="md:w-80 w-full">
    <template #dropdownicon>
        <i class="pi pi-search" />
    </template>
    <template #header>
        <div class="font-medium px-3 py-2">Available Files</div>
    </template>
    <template #footer>
        <div class="px-3 pt-1 pb-2 flex justify-between">
            <Button label="Add New" severity="secondary" text size="small" icon="pi pi-plus" />
            <Button label="Remove All" severity="danger" text size="small" icon="pi pi-plus" />
        </div>
    </template>
</TreeSelect>

填充 #

将 variant 属性指定为 filled，以显示组件，其视觉强调程度高于默认的 outlined 样式。

选择项目

<TreeSelect v-model="selectedValue" variant="filled" :options="nodes" placeholder="Select Item" class="md:w-80 w-full" />

浮动标签 #

当获得焦点时，浮动标签将出现在输入字段的顶部。有关更多信息，请访问浮动标签文档。

空的
空的
空的

<FloatLabel class="w-full md:w-80">
    <TreeSelect v-model="value1" inputId="over_label" :options="nodes" class="w-full" />
    <label for="over_label">Over Label</label>
</FloatLabel>

<FloatLabel class="w-full md:w-80" variant="in">
    <TreeSelect v-model="value2" inputId="in_label" :options="nodes" class="w-full" variant="filled" />
    <label for="in_label">In Label</label>
</FloatLabel>

<FloatLabel class="w-full md:w-80" variant="on">
    <TreeSelect v-model="value3" inputId="on_label" :options="nodes" class="w-full" />
    <label for="on_label">On Label</label>
</FloatLabel>

Ifta标签 #

IftaLabel 用于创建嵌入式顶部对齐标签。有关更多信息，请访问IftaLabel文档。

空的

<IftaLabel class="w-full md:w-80">
    <TreeSelect v-model="selectedValue" inputId="t_file" :options="nodes" class="w-full" variant="filled" />
    <label for="t_file">File</label>
</IftaLabel>

尺寸 #

TreeSelect 提供了 small 和 large 两种尺寸作为基础尺寸的替代方案。

小尺寸 (Small)
普通尺寸 (Normal)
大尺寸 (Large)

<TreeSelect v-model="value1" :options="nodes" size="small" placeholder="Small" class="md:w-80 w-full" />
<TreeSelect v-model="value2" :options="nodes" placeholder="Normal" class="md:w-80 w-full" />
<TreeSelect v-model="value3" :options="nodes" size="large" placeholder="Large" class="md:w-80 w-full" />

无效 (Invalid) #

无效状态通过 invalid 属性显示，以指示验证失败。当与表单验证库集成时，可以使用此样式。

树选择
树选择

<TreeSelect v-model="selectedValue1" :invalid="Object.keys(selectedValue1).length === 0" class="md:w-80 w-full" :options="nodes" placeholder="TreeSelect" />
<TreeSelect v-model="selectedValue2" :invalid="Object.keys(selectedValue2).length === 0" class="md:w-80 w-full" :options="nodes" placeholder="TreeSelect" variant="filled" />

禁用 (Disabled) #

当存在 disabled 属性时，元素无法编辑和聚焦。

树选择

<TreeSelect v-model="selectedValue" disabled class="md:w-80 w-full" :options="nodes" placeholder="TreeSelect" />

可访问性 #

屏幕阅读器 (Screen Reader)

可以使用 aria-labelledby 或 aria-label 属性提供描述组件的值。除了 aria-haspopup 和 aria-expanded 属性之外，treeselect 元素还具有 combobox 角色。组合框和弹出窗口之间的关系通过 aria-controls 创建，该属性引用弹出窗口的 id。

弹出列表具有一个 id，该 id 引用 combobox 元素的 aria-controls 属性，并使用 tree 作为角色。每个列表项都具有 treeitem 角色以及 aria-label、aria-selected 和 aria-expanded 属性。在复选框选择中，使用 aria-checked 代替 aria-selected。复选框和切换图标对屏幕阅读器隐藏，因为它们的父元素具有 treeitem 角色和属性，而是用于阅读器和键盘支持。树节点的容器元素具有 group 角色。 aria-setsize、aria-posinset 和 aria-level 属性是隐式计算的，并添加到每个 treeitem。


<span id="dd1">Options</span>
<TreeSelect aria-labelledby="dd1" />

<TreeSelect aria-label="Options" />

关闭状态键盘支持 (Closed State Keyboard Support)

按键 (Key)功能 (Function)
tab将焦点移动到 treeselect 元素。
空格键 (space)打开弹出窗口并将视觉焦点移动到选定的树节点，如果没有选定的树节点，则第一个树节点接收焦点。
向下箭头 (down arrow)打开弹出窗口并将视觉焦点移动到选定的选项，如果没有选定的选项，则第一个选项接收焦点。

弹出窗口键盘支持 (Popup Keyboard Support)

按键 (Key)功能 (Function)
tab将焦点移动到页面选项卡序列中的下一个可聚焦元素。
shift + tab将焦点移动到页面选项卡序列中的上一个可聚焦元素。
回车键 (enter)选择聚焦的选项，如果选择模式为单选，则关闭弹出窗口。
空格键 (space)选择聚焦的选项，如果选择模式为单选，则关闭弹出窗口。
Esc键 (escape)关闭弹出窗口，将焦点移动到 treeselect 元素。
向下箭头 (down arrow)将焦点移动到下一个树节点。
向上箭头 (up arrow)将焦点移动到上一个树节点。
向右箭头 (right arrow)如果节点已关闭，则打开该节点，否则将焦点移动到第一个子节点。
向左箭头 (left arrow)如果节点已打开，则关闭该节点，否则将焦点移动到父节点。
PrimeVue 4.2.5 on Vue 3 by PrimeTek