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 of pre-selected tree nodes.

(string | number | TreeNode | object)[]

[]

checked-by

The key to set the checked field in the tree view model.

String | Function

"checked"

children-by

Child nodes key.

String | Function

"children"

color

The checkboxes color.

string

"primary"

disabled-by

The key which describes the disabled property.

String | Function

"disabled"

disabledBy

The key which describes the disabled property.

string | function

expand-all

Expand or hide all nodes by default.

Boolean

false

expand-node-by

Click target to expand node, can be node or leaf icon.

String

"leaf"

expandAll

Expand or hide all nodes by default.

boolean

expanded

Array of pre-expanded tree nodes.

Array

[]

expanded-by

The where is placed the expanded property.

String | Function

"expanded"

expandedBy

The where is placed the expanded property.

string | function

filter

Tree view filter.

string

""

filter-method

Custom tree view filter method.

Function

-

filterMethod

Custom tree view filter method.

function

icon-by

The key where is node placed.

String | Function

"icon"

iconBy

The key where is node placed.

string | function

nodes

Tree nodes array.

(TreeNode | object)[]

[]

selectable

Selectable.

boolean

false

selection-type

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

String

"leaf"

selectionType

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

'leaf' | 'independent'

stateful

Add possibility to work with component without setting v-model.

Boolean

true

text-by

The key to show the value of node item.

String | Function

"label"

textBy

The key to show the value of node item.

string | function

track-by

The key to index nodes.

String | Function

"id"

trackBy

The key to index nodes.

string | function

value-by

The key to track the value.

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

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