Treeview

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

Usage

A basic example

API

v-treeview
Name
activatable
Default
false
Type
boolean

Components.Treeview.

Name
active
Default
[]
Type
array

Components.Treeview.

Name
active-class
Default
'v-treeview-node--active'
Type
string

Components.Treeview.

Name
dark
Default
false
Type
boolean

ダークテーマを適用します。

Name
expand-icon
Default
'$vuetify.icons.subgroup'
Type
string

Components.Treeview.

Name
filter New in — v1.5
Default
null
Type
function

Components.Treeview.

Name
hoverable
Default
false
Type
boolean

Components.Treeview.

Name
indeterminate-icon
Default
'$vuetify.icons.checkboxIndeterminate'
Type
string

Components.Treeview.

Name
item-children
Default
'children'
Type
string

Components.Treeview.

Name
item-key
Default
'id'
Type
string

Components.Treeview.

Name
item-text
Default
'name'
Type
string

Components.Treeview.

Name
items
Default
[]
Type
array

Components.Treeview.

Name
light
Default
false
Type
boolean

ライトテーマを適用します。

Name
load-children
Default
null
Type
function

Components.Treeview.

Name
loading-icon
Default
'$vuetify.icons.loading'
Type
string

Components.Treeview.

Name
multiple-active
Default
false
Type
boolean

Components.Treeview.

Name
off-icon
Default
'$vuetify.icons.checkboxOff'
Type
string

Components.Treeview.

Name
on-icon
Default
'$vuetify.icons.checkboxOn'
Type
string

Components.Treeview.

Name
open
Default
[]
Type
array

Components.Treeview.

Name
open-all
Default
false
Type
boolean

Components.Treeview.

Name
open-on-click
Default
false
Type
boolean

Components.Treeview.

Name
return-object
Default
false
Type
boolean

Components.Treeview.

Name
search New in — v1.5
Default
undefined
Type
string

Components.Treeview.

Name
selectable
Default
false
Type
boolean

Components.Treeview.

Name
selected-color
Default
'accent'
Type
string

Components.Treeview.

Name
transition
Default
false
Type
boolean

Components.Treeview.

Name
value
Default
[]
Type
array

Components.Treeview.

Examples

Searching a directory

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.

Scoped slots

Using scoped 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.

Async items

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.

Custom selectable icons

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

Edit this page | language on Github
Vuetify 3 is now available!The latest version of Vuetify is now available!
Learn about Vuetify 3's new features and functionality for modern Vue applications
Start exploringExplore