Treeview

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

用例

A basic example

API

v-treeview
名称
activatable
默认值
false
类型
boolean

Components.Treeview.

名称
active
默认值
[]
类型
array

Components.Treeview.

名称
active-class
默认值
'v-treeview-node--active'
类型
string

Components.Treeview.

名称
dark
默认值
false
类型
boolean

应用暗黑主题变体

名称
expand-icon
默认值
'$vuetify.icons.subgroup'
类型
string

Components.Treeview.

名称
filter New in — v1.5
默认值
null
类型
function

Components.Treeview.

名称
hoverable
默认值
false
类型
boolean

Components.Treeview.

名称
indeterminate-icon
默认值
'$vuetify.icons.checkboxIndeterminate'
类型
string

Components.Treeview.

名称
item-children
默认值
'children'
类型
string

Components.Treeview.

名称
item-key
默认值
'id'
类型
string

Components.Treeview.

名称
item-text
默认值
'name'
类型
string

Components.Treeview.

名称
items
默认值
[]
类型
array

Components.Treeview.

名称
light
默认值
false
类型
boolean

应用明亮主题变体

名称
load-children
默认值
null
类型
function

Components.Treeview.

名称
loading-icon
默认值
'$vuetify.icons.loading'
类型
string

Components.Treeview.

名称
multiple-active
默认值
false
类型
boolean

Components.Treeview.

名称
off-icon
默认值
'$vuetify.icons.checkboxOff'
类型
string

Components.Treeview.

名称
on-icon
默认值
'$vuetify.icons.checkboxOn'
类型
string

Components.Treeview.

名称
open
默认值
[]
类型
array

Components.Treeview.

名称
open-all
默认值
false
类型
boolean

Components.Treeview.

名称
open-on-click
默认值
false
类型
boolean

Components.Treeview.

名称
return-object
默认值
false
类型
boolean

Components.Treeview.

名称
search New in — v1.5
默认值
undefined
类型
string

Components.Treeview.

名称
selectable
默认值
false
类型
boolean

Components.Treeview.

名称
selected-color
默认值
'accent'
类型
string

Components.Treeview.

名称
transition
默认值
false
类型
boolean

Components.Treeview.

名称
value
默认值
[]
类型
array

控制可见性

示例

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