树

树用于显示分层数据。

导入 #


import Tree from 'primevue/tree';

基本 #

树组件需要一个 TreeNode 对象数组作为其value。


<Tree :value="nodes" class="w-full md:w-[30rem]"></Tree>

受控 #

可以使用 expandedKeys 属性以编程方式控制树的状态，该属性定义展开的键。此属性是一个 Map 实例，其键是节点的键，值是布尔值。请注意，expandedKeys 还支持与 v-model 指令的双向绑定。


<div class="flex flex-wrap gap-2 mb-6">
    <Button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll" />
    <Button type="button" icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
</div>
<Tree v-model:expandedKeys="expandedKeys" :value="nodes" class="w-full md:w-[30rem]"></Tree>

选择 #

单选 #

通过将 selectionMode 设置为 single 并使用 selectionKeys 属性来管理选择值绑定，可以配置单节点选择。


<Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" class="w-full md:w-[30rem]"></Tree>

多选 #

通过将 selectionMode 设置为 multiple，可以选择多个节点。默认情况下，在多选模式下，不需要按 metaKey（例如，⌘）即可添加到现有选择中。当存在可选的 metaKeySelection 时，行为会发生改变，需要按下 meta 键才能选择新节点。请注意，在启用触摸的设备上，树始终忽略 metaKey。

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

MetaKey


<Tree v-model:selectionKeys="selectedKey" :value="nodes"
    selectionMode="multiple" :metaKeySelection="checked"></Tree>

复选框 #

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

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


<Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="checkbox" class="w-full md:w-[30rem]"></Tree>

事件 #

为每种用户交互类型（例如展开、折叠和选择）提供了一个事件。


<Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" :metaKeySelection="false"
    @nodeSelect="onNodeSelect" @nodeUnselect="onNodeUnselect" @nodeExpand="onNodeExpand" @nodeCollapse="onNodeCollapse" class="w-full md:w-[30rem]"></Tree>

延迟加载 #

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

遮罩模式

图标模式


<Tree :value="nodes" @node-expand="onNodeExpand" :loading="loading" class="w-full md:w-[30rem]"></Tree>
<Tree :value="nodes2" @node-expand="onNodeExpand2" loadingMode="icon" class="w-full md:w-[30rem]"></Tree>

模板 #

通过将 type 属性与槽名称匹配，每个节点可以具有不同的模板。

简介
组件深入


<Tree :value="nodes" class="w-full md:w-[30rem]">
    <template #default="slotProps">
        <b>{{ slotProps.node.label }}</b>
    </template>
    <template #url="slotProps">
        <a :href="slotProps.node.data">{{ slotProps.node.label }}</a>
    </template>
</Tree>

筛选 #

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


<Tree :value="nodes" :filter="true" filterMode="lenient" class="w-full md:w-[30rem]"></Tree>
<Tree :value="nodes" :filter="true" filterMode="strict" class="w-full md:w-[30rem]"></Tree>

可访问性 #

屏幕阅读器

用于描述组件的值可以使用 aria-labelledby 或 aria-label 属性提供。根列表元素具有 tree 角色，而每个列表项都具有 treeitem 角色以及 aria-label、aria-selected 和 aria-expanded 属性。在复选框选择中，使用 aria-checked 代替 aria-selected。TreeNode 的容器元素具有 group 角色。复选框和切换图标对屏幕阅读器隐藏，因为它们的父元素带有 treeitem 角色和属性，而是用于阅读器和键盘支持。aria-setsize、aria-posinset 和 aria-level 属性是隐式计算的，并添加到每个 treeitem 中。

键盘支持

按键	功能
tab	当焦点进入组件时，将焦点移动到第一个选定的节点，如果没有，则第一个元素接收焦点。如果焦点已在组件内部，则将焦点移动到页面 tab 序列中的下一个可聚焦元素。
shift + tab	当焦点进入组件时，将焦点移动到最后一个选定的节点，如果没有，则第一个元素接收焦点。如果焦点已在组件内部，则将焦点移动到页面 tab 序列中的上一个可聚焦元素。
enter	选择聚焦的树节点。
空格键	选择聚焦的树节点。
下箭头	将焦点移动到下一个树节点。
上箭头	将焦点移动到上一个树节点。
右箭头	如果节点已关闭，则打开节点，否则将焦点移动到第一个子节点。
左箭头	如果节点已打开，则关闭节点，否则将焦点移动到父节点。

树