樹狀組件用於顯示階層式資料。
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。
在多重選取模式中，值繫結應該是一個索引鍵值對，其中索引鍵是節點索引鍵，值是表示選取的布林值。
<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。樹狀節點的容器元素具有 group 角色。核取方塊和切換圖示會對螢幕閱讀器隱藏，因為會改為使用具有 treeitem 角色和屬性的父元素來支援閱讀器和鍵盤。aria-setsize、aria-posinset 和 aria-level 屬性會隱式計算並新增至每個 treeitem。
| 按鍵 | 功能 |
|---|---|
| tab | 當焦點進入元件時，將焦點移至第一個選取的節點，如果沒有選取節點，則第一個元素會接收焦點。如果焦點已在元件內，則將焦點移至頁面 tab 順序中的下一個可聚焦元素。 |
| shift + tab | 當焦點進入元件時，將焦點移至最後一個選取的節點，如果沒有選取節點，則第一個元素會接收焦點。如果焦點已在元件內，則將焦點移至頁面 tab 順序中的上一個可聚焦元素。 |
| enter | 選取焦點樹狀節點。 |
| space | 選取焦點樹狀節點。 |
| 下箭頭 | 將焦點移至下一個樹狀節點。 |
| 上箭頭 | 將焦點移至上一個樹狀節點。 |
| 右箭頭 | 如果節點已關閉，則開啟節點，否則將焦點移至第一個子節點。 |
| 左箭頭 | 如果節點已開啟，則關閉節點，否則將焦點移至父節點。 |