Treeview
The v-treeview component is useful for displaying large amounts of nested data.
API
Allows user to mark a node as active by clicking on it
Syncable prop that allows one to control which nodes are active. The array consists of the item-key of each active item.
The class applied to the node when active
Applies the dark theme variant
Icon used to indicate that a node can be expanded
Custom item filtering function. By default it will use case-insensitive search in item's label.
Applies a hover class when mousing over nodes
Icon used when node is in an indeterminate state
Property on supplied items that contains its children
Property on supplied items used to keep track of node state. The value of this property has to be unique among all items.
Property on supplied items that contains its label text
An array of items used to build the treeview
Applies the light theme variant
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.
Icon used when node is in a loading state
When true, allows user to have multiple active nodes at the same time
Icon used when node is not selected
Icon used when leaf node is selected or when a branch node is fully selected
Syncable prop that allows one to control which nodes are open. The array consists of the item-key of each open item.
When true will cause all branch nodes to be opened when component is mounted
When true will cause nodes to be opened by clicking anywhere on it, instead of only opening by clicking on expand icon. When using this prop with activatable you will be unable to mark nodes with children as active.
When true will make v-model, active.sync and open.sync return the complete object instead of just the key
The search model for filtering results
Will render a checkbox next to each node allowing them to be selected
The color of the selection checkbox
Applies a transition when nodes are opened and closed
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
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.