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 |