Treeview

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

Utilização

A basic example

API

v-treeview
Nome
activatable
Padrão
false
Tipos
boolean

Components.Treeview.

Nome
active
Padrão
[]
Tipos
array

Components.Treeview.

Nome
active-class
Padrão
'v-treeview-node--active'
Tipos
string

Components.Treeview.

Nome
dark
Padrão
false
Tipos
boolean

Components.Treeview.

Nome
expand-icon
Padrão
'$vuetify.icons.subgroup'
Tipos
string

Components.Treeview.

Nome
filter New in — v1.5
Padrão
null
Tipos
function

Components.Treeview.

Nome
hoverable
Padrão
false
Tipos
boolean

Components.Treeview.

Nome
indeterminate-icon
Padrão
'$vuetify.icons.checkboxIndeterminate'
Tipos
string

Components.Treeview.

Nome
item-children
Padrão
'children'
Tipos
string

Components.Treeview.

Nome
item-key
Padrão
'id'
Tipos
string

Components.Treeview.

Nome
item-text
Padrão
'name'
Tipos
string

Components.Treeview.

Nome
items
Padrão
[]
Tipos
array

Components.Treeview.

Nome
light
Padrão
false
Tipos
boolean

Components.Treeview.

Nome
load-children
Padrão
null
Tipos
function

Components.Treeview.

Nome
loading-icon
Padrão
'$vuetify.icons.loading'
Tipos
string

Components.Treeview.

Nome
multiple-active
Padrão
false
Tipos
boolean

Components.Treeview.

Nome
off-icon
Padrão
'$vuetify.icons.checkboxOff'
Tipos
string

Components.Treeview.

Nome
on-icon
Padrão
'$vuetify.icons.checkboxOn'
Tipos
string

Components.Treeview.

Nome
open
Padrão
[]
Tipos
array

Components.Treeview.

Nome
open-all
Padrão
false
Tipos
boolean

Components.Treeview.

Nome
open-on-click
Padrão
false
Tipos
boolean

Components.Treeview.

Nome
return-object
Padrão
false
Tipos
boolean

Components.Treeview.

Nome
search New in — v1.5
Padrão
undefined
Tipos
string

Components.Treeview.

Nome
selectable
Padrão
false
Tipos
boolean

Components.Treeview.

Nome
selected-color
Padrão
'accent'
Tipos
string

Components.Treeview.

Nome
transition
Padrão
false
Tipos
boolean

Components.Treeview.

Nome
value
Padrão
[]
Tipos
array

Controla visibilidade

Exemplos

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