Tree V2 virtualized treebeta

Tree view with blazing fast scrolling performance for any amount of data

Basic usage

Basic tree structure.

Selectable

Used for node selection.

Disabled checkbox

The checkbox of a node can be set as disabled.

Default expanded and default checked

Tree nodes can be initially expanded or checked

Custom node content

The content of tree nodes can be customized, so you can add icons or buttons as you will

Tree node filtering

Tree nodes can be filtered

Attributes

AttributeDescriptionTypeDefault
datatree dataarray
empty-texttext displayed when data is voidstring
propsconfiguration options, see the following tableobject
highlight-currentwhether current node is highlightedbooleanfalse
expand-on-click-nodewhether to expand or collapse node when clicking on the node, if false, then expand or collapse node only when clicking on the arrow icon.booleantrue
check-on-click-nodewhether to check or uncheck node when clicking on the node, if false, the node can only be checked or unchecked by clicking on the checkbox.booleanfalse
default-expanded-keysarray of keys of initially expanded nodesarray
show-checkboxwhether node is selectablebooleanfalse
check-strictlywhether checked state of a node not affects its father and child nodes when show-checkbox is truebooleanfalse
default-checked-keysarray of keys of initially checked nodesarray
current-node-keykey of initially selected nodestring, number
filter-methodthis function will be executed on each node when use filter method. if return false, tree node will be hidden.Function(value, data)
indenthorizontal indentation of nodes in adjacent levels in pixelsnumber16
iconcustome tree node iconstring-

props

AttributeDescriptionTypeDefault
idunique identity key name for nodes, its value should be unique across the whole treestring, numberid
labelspecify which key of node object is used as the node's labelstringlabel
childrenspecify which node object is used as the node's subtreestringchildren
disabledspecify which key of node object represents if node's checkbox is disabledbooleandisabled

Method

Tree has the following method, which returns the currently selected array of nodes.

MethodDescriptionParameters
filterfilter all tree nodes, filtered nodes will be hidden(query: string)
getCheckedNodesIf the node can be selected (show-checkbox is true), it returns the currently selected array of nodes(leafOnly: boolean)
getCheckedKeysIf the node can be selected (show-checkbox is true), it returns the currently selected array of node's keys(leafOnly: boolean)
setCheckedKeysset certain nodes to be checked(keys: TreeKey[])
setCheckedset node to be checked or not(key: TreeKey, checked: boolean)
getHalfCheckedNodesIf the node can be selected (show-checkbox is true), it returns the currently half selected array of nodes-
getHalfCheckedKeysIf the node can be selected (show-checkbox is true), it returns the currently half selected array of node's keys-
getCurrentKeyreturn the highlight node's key (undefined if no node is highlighted)
getCurrentNodereturn the highlight node's data (undefined if no node is highlighted)
setCurrentKeyset highlighted node by key(key: TreeKey)
setDataWhen the data is very large, using reactive data will cause the poor performance, so we provide a way to avoid this situation(data: TreeData)

Events

Event NameDescriptionParameters
node-clicktriggers when a node is clicked(data: TreeNodeData, node: TreeNode)
node-contextmenutriggers when a node is clicked by right button(e: Event, data: TreeNodeData, node: TreeNode)
check-changetriggers when the selected state of the node changes(data: TreeNodeData, checked: boolean)
checktriggers after clicking the checkbox of a node(data: TreeNodeData, info: { checkedKeys: TreeKey[],checkedNodes: TreeData, halfCheckedKeys: TreeKey[], halfCheckedNodes: TreeData,})
current-changetriggers when current node changes(data: TreeNodeData, node: TreeNode)
node-expandtriggers when current node open(data: TreeNodeData, node: TreeNode)
node-collapsetriggers when current node close(data: TreeNodeData, node: TreeNode)

Slots

NameDescription
Custom content for tree nodes. The scope parameter is { node: TreeNode, data: TreeNodeData }