ツリーは階層データを表示するために使用されます。
import Tree from 'primevue/tree';
ツリーコンポーネントは、valueとしてTreeNodeオブジェクトの配列が必要です。
<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" class="w-full md:w-[30rem]"
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" class="w-full md:w-[30rem]"
@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プロパティを追加することで有効になります。デフォルトでは、ノードのラベルプロパティがテキストフィールドの値と比較するために使用されます。検索中に使用するフィールドをカスタマイズするには、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-selectedの代わりにaria-checkedが使用されます。 treenodeのコンテナ要素には、groupロールがあります。 チェックボックスとトグルアイコンは、スクリーンリーダーからは非表示になっています。これは、treeitemロールと属性を持つ親要素が、リーダーとキーボードのサポートに使用されるためです。 aria-setsize、aria-posinset、aria-level属性は暗黙的に計算され、各treeitemに追加されます。
| キー | 機能 |
|---|---|
| tab | コンポーネントにフォーカスが入ると、最初に選択されたノードにフォーカスが移動します。何もない場合は、最初の要素にフォーカスが当たります。 フォーカスがすでにコンポーネント内にある場合は、ページタブシーケンスの次のフォーカス可能な要素にフォーカスが移動します。 |
| shift + tab | コンポーネントにフォーカスが入ると、最後に選択されたノードにフォーカスが移動します。何もない場合は、最初の要素にフォーカスが当たります。 フォーカスがすでにコンポーネント内にある場合は、ページタブシーケンスの前のフォーカス可能な要素にフォーカスが移動します。 |
| enter | フォーカスされているツリーノードを選択します。 |
| スペース | フォーカスされているツリーノードを選択します。 |
| 下矢印 | 次のツリーノードにフォーカスを移動します。 |
| 上矢印 | 前のツリーノードにフォーカスを移動します。 |
| 右矢印 | ノードが閉じている場合はノードを開き、そうでない場合は最初の子ノードにフォーカスを移動します。 |
| 左矢印 | ノードが開いている場合はノードを閉じ、そうでない場合は親ノードにフォーカスを移動します。 |