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

Allows user to mark a node as active by clicking on it

Name
active
Default
[]
Type
array

Syncable prop that allows one to control which nodes are active. The array consists of the item-key of each active item.

Name
active-class
Default
'v-treeview-node--active'
Type
string
Name
dark
Default
false
Type
boolean

Applies the dark theme variant

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

Icon used to indicate that a node can be expanded

Name
hoverable
Default
false
Type
boolean

Applies a hover class when mousing over nodes

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

Icon used when node is in an indeterminate state

Name
item-children
Default
'children'
Type
string

Property on supplied items that contains its children

Name
item-key
Default
'id'
Type
string

Property on supplied items used to keep track of node state. The value of this property has to be unique among all items.

Name
item-text
Default
'name'
Type
string

Property on supplied items that contains its label text

Name
items
Default
[]
Type
array

An array of items used to build the treeview

Name
light
Default
false
Type
boolean

Applies the light theme variant

Name
load-children
Default
null
Type
function

A function used when dynamically loading children. If this prop is set, then the supplied function will be run if expanding an item that has a item-children property that is an empty array. Supports returning a Promise.

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

Icon used when node is in a loading state

Name
multiple-active
Default
false
Type
boolean

When true, allows user to have multiple active nodes at the same time

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

Icon used when node is not selected

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

Icon used when leaf node is selected or when a branch node is fully selected

Name
open
Default
[]
Type
array

Syncable prop that allows one to control which nodes are open. The array consists of the item-key of each open item.

Name
open-all
Default
false
Type
boolean

When true will cause all branch nodes to be opened when component is mounted

Name
open-on-click
Default
false
Type
boolean

When true will cause nodes to be opened by clicking anywhere on it, instead of only opening by clicking on expand icon

Name
selectable
Default
false
Type
boolean

Will render a checkbox next to each node allowing them to be selected

Name
selected-color
Default
'accent'
Type
string

The color of the selection checkbox

Name
transition
Default
false
Type
boolean

Applies a transition when nodes are opened and closed

Name
value
Default
[]
Type
array

Allows one to control which nodes are selected. The array consists of the item-key of each selected item. Is used with @input event to allow for v-model binding.

Examples

Scoped slots

Using scoped slots we are able to create an intuitive file explorer


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.