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)[]

[]

checkedBy

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

String | Function

"checked"

childrenBy

Child nodes key.

String | Function

"children"

color

The checkboxes color.

string

"primary"

disabledBy

The key which describes the disabled property.

string | function

"disabled"

expandAll

Expand or hide all nodes by default.

boolean

false

expanded

Array of pre-expanded tree nodes.

Array

[]

expandedBy

The where is placed the expanded property.

string | function

"expanded"

expandNodeBy

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

String

"leaf"

filter

Tree view filter.

string

""

filterMethod

Custom tree view filter method.

function

-

iconBy

The key where is node placed.

string | function

"icon"

nodes

Tree nodes array.

(TreeNode | object)[]

[]

selectable

Selectable.

boolean

false

selectionType

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

'leaf' | 'independent'

"leaf"

stateful

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

Boolean

true

textBy

The key to show the value of node item.

string | function

"label"

trackBy

The key to index nodes.

string | function

"id"

valueBy

The key to track the value.

string | function

"id"

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 and must be listed after the 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

Change log #