Tree view #
Component for the hierarchical and nested data
Basic usage #
List of video game genres:
Customizable content #
You can customize the body of node
It is absolutely optional
Filters #
Selectable #
Selected nodes: none
Colored checkboxes #
Color:
Props #
| Name | Description | Types | Default |
|---|---|---|---|
| checked | Array of pre-selected tree nodes. |
|
|
| checkedBy | The key to set the checked field in the tree view model. |
|
|
| childrenBy | Child nodes key. |
|
|
| color | The checkboxes color. |
|
|
| disabledBy | The key which describes the disabled property. |
|
|
| expandAll | Expand or hide all nodes by default. |
|
|
| expanded | Array of pre-expanded tree nodes. |
|
|
| expandedBy | The where is placed the expanded property. |
|
|
| expandNodeBy | Click target to expand node, can be |
|
|
| filter | Tree view filter. |
|
|
| filterMethod | Custom tree view filter method. |
| - |
| iconBy | The key where is node placed. |
|
|
| nodes | Tree nodes array. |
|
|
| selectable | Selectable. |
|
|
| selectionType | Selection type where is a |
|
|
| stateful | Add possibility to work with component without setting |
|
|
| textBy | The key to show the value of node item. |
|
|
| trackBy | The key to index nodes. |
|
|
| valueBy | The key to track the value. |
|
|
Events #
| Name | Description |
|---|---|
update:checked | The array of checked tree nodes. |
update:expanded | The array of expanded tree nodes. |
update:modelValue | The event is triggered when the component needs to change the model. Is also used by |
update:selected |
Slots #
| Name | Description |
|---|---|
checkbox | Checkbox icon placeholder. |
content | Configurable node content. |
icon | Additional icon placeholder. |
icon-toggle | Node leaf icon. |
not-found | No matching nodes to the filter message. |
Css Variables #
| Name | Default Value |
|---|---|
| --va-tree-view-padding | 0.3125rem |