# Treeview

v-treeview コンポーネントは大量のネストされたデータを表示するのに便利です。

# 使い方

基本的な使い方の例

# API

# サンプル

# Props

# Activatable

ツリービューのノードは、それらをクリックすることによってアクティブにすることができます。

#

アクティブなツリービューノードのテキストと背景色をコントロールできます。

# Dense(高密度)モード

Dense(高密度)モードでは、アイテムの高さが減少し、よりコンパクトなレイアウトが提供されます。

# Hoverable

ツリービューノードは、ホバー効果を設定できます。

# Item disabled

item-disabled propを設定すると、trueに設定したときに、どのノードのプロパティが無効になるかを制御することができます。

# Load children

load-children プロパティに Promise コールバックを提供することで、子データを動的にロードすることができます。 このコールバックは、ユーザーが空の配列である子プロパティを持つアイテムを展開しようとするときに実行されます。

# Open all

ツリービューノードは、ページの読み込み時に事前に開くことができます。

# Rounded

ツリービューノードを丸めることができます。

# Selectable

ツリービューノードと子を簡単に選択できます。

# Selected color

選択したノードのチェックボックスの色を制御できます。

# Selection type

Treeview が 2 つの異なる選択タイプをサポートするようになりました。 デフォルトの型は **‘leaf’**で、v-model 配列にリーフノードのみ含まれます。 しかし、親ノードは部分的または完全に選択されたものとしてレンダリングされます。 代替モードは **‘independent’**で、親ノードを選択することができますが、各ノードは親ノードと子ノードとは独立しています。

# Shaped

シェイプされたツリービューでは、ノードの片側は丸い境界線になります。

# Slots

# AppendとLabel

labelappendスロットを使用して、直感的なファイルエクスプローラを作成することができます。

# その他

# SearchとFilter

search プロパティを使用すると、ツリービューを簡単にフィルタリングできます。 大文字小文字を区別するフィルタリングやファジーフィルタリングが必要な場合は、 filter プロパティを設定することで、カスタムフィルタ機能を簡単に適用できます。 これは v-autocomplete コンポーネントに似ています。

# Selectable(選択可能)なアイコン

on, off, indeterminate アイコンをカスタマイズして、選択可能なツリーを表示します。 API が読み込まれた項目などの他の高度な機能と組み合わせてください。

準備はできましたか?

Vuetifyのチームが選ぶ関連コンテンツで他の学習トピックに進むか、下のナビゲーション リンクでページ間を移動できます。
GitHub でこのページを編集する
最終更新日:09/18/2021, 7:08:41 AM