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 |
|
| |
| checked | Array of pre-selected tree nodes. |
| |
| checkedBy |
|
| |
| childrenBy |
|
| |
| color |
|
| |
| color | The checkboxes color. |
| |
| disabledBy |
|
| |
| disabledBy | The key which describes the disabled property. |
| |
| expandAll |
|
| |
| expandAll | Expand or hide all nodes by default. |
| |
| expanded |
|
| |
| expandedBy |
|
| |
| expandedBy | The where is placed the expanded property. |
| |
| expandNodeBy |
|
| |
| filter |
|
| |
| filter | Tree view filter. |
| |
| filterMethod |
| - | |
| filterMethod | Custom tree view filter method. |
| |
| iconBy |
|
| |
| iconBy | The key where is node placed. |
| |
| nodes |
|
| |
| nodes | Tree nodes array. |
| |
| selectable |
|
| |
| selectable | Selectable. |
| |
| selectionType |
|
| |
| selectionType | Selection type where is a |
| |
| stateful |
|
| |
| textBy |
|
| |
| textBy | The key to show the value of node item. |
| |
| trackBy |
|
| |
| trackBy | The key to index nodes. |
| |
| valueBy |
|
| |
| 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 |