Treeview
The v-treeview component is useful for displaying large amounts of nested data.
Usage
A basic example of the treeview component.
API
| Component | Description |
|---|---|
| v-treeview | Primary Component |
| v-treeview-item | Sub-component used to display a single treeview node |
| v-treeview-group | Sub-component used to display a single treeview node’s children |
There is a bug related to how babel-plugin-jsx renders templates that degrades VTreeview performance. We are tracking the issue here.
Guide
The v-treeview component is useful for displaying large amounts of nested data. It is a tree structure that can be expanded and collapsed, allowing users to navigate through the hierarchy of items.
It is built on top of the v-list component, which provides the basic structure and functionality for displaying lists of items. The v-treeview component extends this functionality by adding support for hierarchical data, allowing users to expand and collapse items to reveal or hide their children.
Props
The v-treeview component has several props that allow you to customize its appearance and behavior.
Activatable
Treeview nodes can be activated by clicking on them.
Color
You can control the text and background color of the active treeview node.
Density
Dense mode provides more compact layout with decreased heights of the items.
Items registration
When working with large trees it is recommended to include items-registration="props" to ensure faster loading and interactions.
Item props
If item-props is set to true then the whole item will be spread. In the following example, the disabled prop defined in each item will disable the item accordingly.
Open all
Treeview nodes can be pre-opened on page load.
Fluid
The fluid prop removes the extra indentation used to line up children. This is useful when you want to reduce the horizontal space used by the treeview.
Selected color
You can control the color of the selected node checkbox.
Selection type
Treeview supports several selection modes:
- leaf (default): Limits selection to items without children.
- independent: Lets you select any node, with no parent-child linkage at all.
- classic: Selecting a parent selects all descendants, and parent nodes show as selected only when all their descendants are selected. Only leaf nodes are added to the model.
Classic has two variants that are displayed the same way but with slightly different v-model behavior:
- branch: Any parent node with at least one selected descendant is also added to the model.
- trunk: If all children are selected only the parent node is added to the model.
Load children
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.
Slots
The v-treeview component has several slots that allow you to customize the appearance and behavior of its items.
Append and prepend
Using the the prepend slot we are able to create an intuitive file explorer.
Both append, and prepend slots get additional information about the item: depth, path (from indexes), isFirst, isLast and the index within the children list.
No data
When searching within the treeview, you might want to show custom no-data slot to provide context or immediate action.
Title
In this example we use a custom title slot to apply a line-through the treeview item’s text when selected.
Toggle
Here, a custom toggle slot is utilized to assign a specific color and variant to the button depending on the state of the item.
Examples
The following are a collection of examples that demonstrate more advanced and real world use of the v-treeview component.
Search and filter
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 custom-filter prop. This works similar to the v-autocomplete component.
Selectable icons
Customize the on, off and indeterminate icons for your selectable tree. Combine with other advanced functionality like API loaded items.
Indent lines
The v-treeview component can be configured to show indent lines. The indent-lines prop controls lines visibility and the variant.