Vuetify

ショップ

企業向け

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

基本的な使い方の例

確認したいコンポーネントを下から選び、利用できる props、slots、events、functions を確認してください。

以下に、簡単な例から複雑な例まで示します。

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

You can control the color of the selected node checkbox.

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

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

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

Setting item-disabled prop allows to control which node's property disables the node when set to true.

Treeview now supports two different selection types. The default type is 'leaf', which will only include leaf nodes in the v-model array, but will render parent nodes as either partially or fully selected. The alternative mode is 'independent', which allows one to select parent nodes, but each node is independent of its parent and children.

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

Treeview nodes can be activated by clicking on them.

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

Treeview nodes can be pre-opened on page load.

スロットを使用して、直感的なファイルエクスプローラーを作成できます。 prepend スロットの他に、label用のスロットとappend スロットもあります。

Easily filter your treeview by using the search prop. You can easily apply your custom filtering function if you need case-sensitive or fuzzy filtering by setting the filter prop. This works similar to the v-autocomplete component.

You can dynamically load child data by supplying a Promise callback to the load-children prop. This callback will be executed the first time a user tries to expand an item that has a children property that is an empty array.

Customize the on, off and indeterminate icons for your selectable tree. Combine with other advanced functionality like API loaded items.

準備はいいですか? 以下から続きが読めます。

Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!