The v-treeview component is useful for displaying large amounts of nested data.

A basic example

제공되는 Props, Slots, Events 와 함수들을 이용하여 원하는 컴포넌트를 직접 구현해 보세요.

간단한 예재부터 복잡한 예제까지 아래를 참고해서 앱 개발을 시작해 보세요.

Dense mode provides more compact layout with decreased heights of the items.

You can control the color of the selected node checkbox.

You can control the text and background color of the active treeview node.

Shaped treeview's have rounded borders on one side of the nodes.

You can make treeview nodes rounded.

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.

You can easily select treeview nodes and children.

Treeview nodes can be activated by clicking on them.

Treeview nodes can have a hover effect.

Treeview nodes can be pre-opened on page load.

Using slots we are able to create an intuitive file explorer. Apart from the prepend slot, there is also one for the label, and an append slot.

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!