Treeview

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

Uso

A basic example

API

v-treeview
Nombre
activatable
Default
false
Type
boolean

Components.Treeview.

Nombre
active
Default
[]
Type
array

Components.Treeview.

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

Components.Treeview.

Nombre
dark
Default
false
Type
boolean

Aplica la variante del tema dark

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

Components.Treeview.

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

Components.Treeview.

Nombre
hoverable
Default
false
Type
boolean

Components.Treeview.

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

Components.Treeview.

Nombre
item-children
Default
'children'
Type
string

Components.Treeview.

Nombre
item-key
Default
'id'
Type
string

Components.Treeview.

Nombre
item-text
Default
'name'
Type
string

Components.Treeview.

Nombre
items
Default
[]
Type
array

Components.Treeview.

Nombre
light
Default
false
Type
boolean

Aplica la variante del tema light

Nombre
load-children
Default
null
Type
function

Components.Treeview.

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

Components.Treeview.

Nombre
multiple-active
Default
false
Type
boolean

Components.Treeview.

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

Components.Treeview.

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

Components.Treeview.

Nombre
open
Default
[]
Type
array

Components.Treeview.

Nombre
open-all
Default
false
Type
boolean

Components.Treeview.

Nombre
open-on-click
Default
false
Type
boolean

Components.Treeview.

Nombre
return-object
Default
false
Type
boolean

Components.Treeview.

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

Components.Treeview.

Nombre
selectable
Default
false
Type
boolean

Components.Treeview.

Nombre
selected-color
Default
'accent'
Type
string

Components.Treeview.

Nombre
transition
Default
false
Type
boolean

Components.Treeview.

Nombre
value
Default
[]
Type
array

Controla la visibilidad

Ejemplos

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