Tree view
#

Component for the hierarchical and nested data

Basic usage
#

List of video game genres:

Simulation
MMO
Open in GitHub

Customizable content
#

You can customize the body of node

Open in GitHub

Filters
#

Eleven
Open in GitHub

Selectable
#

Item

Selected nodes: none

Open in GitHub

Colored checkboxes
#

Color:

Item
Open in GitHub

Props #

NameDescriptionTypesDefault
checked

Array

[]

checked

Array of pre-selected tree nodes.

(string | number | TreeNode | object)[]

checkedBy

String | Function

"checked"

childrenBy

String | Function

"children"

color

String

"primary"

color

The checkboxes color.

string

disabledBy

String | Function

"disabled"

disabledBy

The key which describes the disabled property.

string | function

expandAll

Boolean

false

expandAll

Expand or hide all nodes by default.

boolean

expanded

Array

[]

expandedBy

String | Function

"expanded"

expandedBy

The where is placed the expanded property.

string | function

expandNodeBy

String

"leaf"

filter

String

""

filter

Tree view filter.

string

filterMethod

Function

-

filterMethod

Custom tree view filter method.

function

iconBy

String | Function

"icon"

iconBy

The key where is node placed.

string | function

nodes

Array

[]

nodes

Tree nodes array.

(TreeNode | object)[]

selectable

Boolean

false

selectable

Selectable.

boolean

selectionType

String

"leaf"

selectionType

Selection type where is a leaf current and all children nodes, independent - single selectable nodes.

'leaf' | 'independent'

stateful

Boolean

true

textBy

String | Function

"label"

textBy

The key to show the value of node item.

string | function

trackBy

String | Function

"id"

trackBy

The key to index nodes.

string | function

valueBy

String | Function

"id"

valueBy

The key to track the value.

string | function

Events #

NameDescription

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 v-model

update:selected

Slots #

NameDescription

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 #

NameDefault Value
--va-tree-view-padding 0.3125rem