TreeSelect

TreeSelectは、階層データから選択するためのフォームコンポーネントです。

インポート # 


import TreeSelect from 'primevue/treeselect';

基本 #

TreeSelectは、v-modelディレクティブとoptionsコレクションとともに制御されたコンポーネントとして使用されます。内部的にはTreeコンポーネントが使用されるため、optionsモデルはTreeNode APIに基づいています。

単一選択モードでは、値バインディングはノードのkey値である必要があります。

アイテムを選択

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

複数 #

selectionModeをmultipleに設定することで、複数のノードを選択できます。デフォルトでは、複数選択モードでは、既存の選択に追加するためにmetaキー（例：⌘）を押す必要はありません。オプションのmetaKeySelectionが存在する場合、新しいノードを選択するにはmetaキーが存在する必要があるように動作が変更されます。タッチ対応デバイスでは、TreeSelectは常にmetaKeyを無視することに注意してください。

複数選択モードでは、値バインディングは、キーがノードキーであり、値が選択を示すブール値であるキーと値のペアである必要があります。


{
    '0-0': true,
    '0-1-0': true
}
アイテムを選択

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

Checkbox #

チェックボックスによる複数ノードの選択は、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" />

フロートラベル #

フォーカスすると、入力フィールドの上にフローティングラベルが表示されます。詳細については、FloatLabelドキュメントを参照してください。

空

<FloatLabel class="w-full md:w-80">
    <TreeSelect v-model="selectedValue" :options="nodes" class="w-full" />
    <label>Tree Select</label>
</FloatLabel>

塗りつぶし #

variantプロパティをfilledとして指定すると、デフォルトのoutlinedスタイルよりも視覚的に強調されたコンポーネントが表示されます。

アイテムを選択

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

無効 #

無効な状態は、検証が失敗したことを示すinvalidプロップを使用して表示されます。フォーム検証ライブラリと統合するときに、このスタイルを使用できます。

TreeSelect

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

無効 #

disabledが存在する場合、要素は編集およびフォーカスできません。

TreeSelect

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

アクセシビリティ #

スクリーンリーダー

コンポーネントを説明する値は、aria-labelledbyまたはaria-labelプロップで指定できます。treeselect要素には、aria-haspopupおよびaria-expanded属性に加えて、comboboxロールがあります。comboboxとポップアップの関係は、ポップアップのidを参照するaria-controlsで作成されます。

ポップアップリストには、combobox要素のaria-controls属性を参照するidがあり、ロールとしてtreeを使用します。各リスト項目には、aria-label、aria-selected、およびaria-expanded属性とともにtreeitemロールがあります。チェックボックス選択では、aria-selectedの代わりにaria-checkedが使用されます。チェックボックスとトグルアイコンは、treeitemロールと属性を持つ親要素がリーダーとキーボードサポートに使用されるため、スクリーンリーダーからは非表示になっています。ツリーノードのコンテナ要素には、groupロールがあります。aria-setsize、aria-posinset、およびaria-level属性は暗黙的に計算され、各treeitemに追加されます。


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

<TreeSelect aria-label="Options" />

閉じた状態のキーボードサポート

キー機能
tabフォーカスをtreeselect要素に移動します。
spaceポップアップを開き、選択したツリーノードに視覚的なフォーカスを移動します。存在しない場合は、最初のツリーノードがフォーカスを受け取ります。
下矢印ポップアップを開き、選択したオプションに視覚的なフォーカスを移動します。存在しない場合は、最初のオプションがフォーカスを受け取ります。

ポップアップキーボードサポート

キー機能
tabフォーカスをページのタブシーケンス内の次のフォーカス可能な要素に移動します。
shift + tabフォーカスをページのタブシーケンス内の前のフォーカス可能な要素に移動します。
enterフォーカスされたオプションを選択し、選択モードがシングルの場合はポップアップを閉じます。
spaceフォーカスされたオプションを選択し、選択モードがシングルの場合はポップアップを閉じます。
escapeポップアップを閉じ、フォーカスをtreeselect要素に移動します。
下矢印フォーカスを次のツリーノードに移動します。
上矢印フォーカスを前のツリーノードに移動します。
右矢印ノードが閉じている場合は、ノードを開きます。それ以外の場合は、フォーカスを最初の子ノードに移動します。
左矢印ノードが開いている場合は、ノードを閉じます。それ以外の場合は、フォーカスを親ノードに移動します。
PrimeVue 3のPrimeVue 4.0.7 (PrimeTek)