Displays hierarchical data with expand and collapse support.

Custom node content is rendered through the nodeicon slot; the node payload exposes its children and expanded state so the right icon can be chosen.

Toggle icons are customized through the nodetoggleicon slot which receives the expanded state of the node.

Tree state can be controlled programmatically with the expandedKeys property that defines the keys that are expanded. This property is a Map instance whose key is the key of a node and value is a boolean. Note that expandedKeys also supports two-way binding with the v-model directive.

Single node selection is configured by setting selectionMode as single along with selectionKeys property to manage the selection value binding.

More than one node is selectable by setting selectionMode to multiple. By default in multiple selection mode, metaKey press (e.g. ⌘) is not necessary to add to existing selections. When the optional metaKeySelection is present, behavior is changed in a way that selecting a new node requires meta key to be present. Note that in touch enabled devices, Tree always ignores metaKey.

In multiple selection mode, value binding should be a key-value pair where key is the node key and value is a boolean to indicate selection.

Selection of multiple nodes via checkboxes is enabled by configuring selectionMode as checkbox.

In checkbox selection mode, value binding should be a key-value pair where key is the node key and value is an object that has checked and partialChecked properties to represent the checked state of a node object to indicate selection.

A header checkbox can be added to toggle the selection of every node at once. Its checked and indeterminate states are derived from the current selectionKeys.

Tree has full keyboard support; arrow keys navigate between nodes, right and left expand and collapse a node and space toggles the selection of the focused node.

Filtering enables searching through the nodes using the built-in filter property.

Lazy loading is demonstrated in this example where nodes are loaded on demand when a node is expanded.

While data is being fetched, a loading overlay with a spinner can be displayed over the Tree by enabling the loading property.

Skeleton placeholders can be rendered for each row while the data is being fetched by displaying a set of empty nodes with a custom node template.

A custom placeholder can be displayed when there are no nodes to show using the empty slot.

Drag&Drop based reordering is enabled by adding the draggableNodes and droppableNodes properties and definining a two-way model binding to the value option. The optional @node-drop event is available to get notified about the new tree state.

Nodes can be transferred between multiple trees as well. The draggableScope and droppableScope properties defines keys to restrict the actions between trees. In this example, nodes can only be transferred from start to the end.

An event is provided for each type of user interaction such as expand, collapse and selection.

Screen Reader

Value to describe the component can either be provided with aria-labelledby or aria-label props. The root list element has a tree role whereas each list item has a treeitem role along with aria-label, aria-selected and aria-expanded attributes. In checkbox selection, aria-checked is used instead of aria-selected. The container element of a treenode has the group role. Checkbox and toggle icons are hidden from screen readers as their parent element with treeitem role and attributes are used instead for readers and keyboard support. The aria-setsize, aria-posinset and aria-level attributes are calculated implicitly and added to each treeitem.

Keyboard Support