Tree

Display a set of data with hierarchies.

Basic usage

Basic tree structure.

Custom leaf node in lazy mode

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

Checking tree nodes

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

Accordion

Only one node among the same level can be expanded at one time.

Draggable

You can drag and drop Tree nodes by adding a draggable attribute.

Attributes

AttributeDescriptionTypeAccepted ValuesDefault
datatree dataarray
empty-texttext displayed when data is voidstring
node-keyunique identity key name for nodes, its value should be unique across the whole treestring
propsconfiguration options, see the following tableobject
render-after-expandwhether to render child nodes only after a parent node is expanded for the first timebooleantrue
loadmethod for loading subtree data, only works when lazy is truefunction(node, resolve)
render-contentrender function for tree nodeFunction(h, { node, data, store })
highlight-currentwhether current node is highlightedbooleanfalse
default-expand-allwhether to expand all nodes by defaultbooleanfalse
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
auto-expand-parentwhether to expand father node when a child node is expandedbooleantrue
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-node-methodthis function will be executed on each node when use filter method. if return false, tree node will be hidden.Function(value, data, node)
accordionwhether only one node among the same level can be expanded at one timebooleanfalse
indenthorizontal indentation of nodes in adjacent levels in pixelsnumber16
icon-classcustome tree node iconstring--
lazywhether to lazy load leaf node, used with load attributebooleanfalse
draggablewhether enable tree nodes drag and dropbooleanfalse
allow-dragthis function will be executed before dragging a node. If false is returned, the node can not be draggedFunction(node)
allow-dropthis function will be executed before the dragging node is dropped. If false is returned, the dragging node can not be dropped at the target node. type has three possible values: 'prev' (inserting the dragging node before the target node), 'inner' (inserting the dragging node to the target node) and 'next' (inserting the dragging node after the target node)Function(draggingNode, dropNode, type)

props

AttributeDescriptionTypeAccepted ValuesDefault
labelspecify which key of node object is used as the node's labelstring, function(data, node)
childrenspecify which node object is used as the node's subtreestring
disabledspecify which key of node object represents if node's checkbox is disabledboolean, function(data, node)
isLeafspecify whether the node is a leaf node, only works when lazy load is enabledboolean, function(data, node)

Method

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

MethodDescriptionParameters
filterfilter all tree nodes, filtered nodes will be hiddenAccept a parameter which will be used as first parameter for filter-node-method
updateKeyChildrenset new data to node, only works when node-key is assigned(key, data) Accept two parameters: 1. key of node 2. new data
getCheckedNodesIf the node can be selected (show-checkbox is true), it returns the currently selected array of nodes(leafOnly, includeHalfChecked) Accept two boolean type parameters: 1. default value is false. If the parameter is true, it only returns the currently selected array of sub-nodes. 2. default value is false. If the parameter is true, the return value contains halfchecked nodes
setCheckedNodesset certain nodes to be checked, only works when node-key is assignedan array of nodes to be checked
getCheckedKeysIf the node can be selected (show-checkbox is true), it returns the currently selected array of node's keys(leafOnly) Accept a boolean type parameter whose default value is false. If the parameter is true, it only returns the currently selected array of sub-nodes.
setCheckedKeysset certain nodes to be checked, only works when node-key is assigned(keys, leafOnly) Accept two parameters: 1. an array of node's keys to be checked 2. a boolean type parameter whose default value is false. If the parameter is true, it only returns the currently selected array of sub-nodes.
setCheckedset node to be checked or not, only works when node-key is assigned(key/data, checked, deep) Accept three parameters: 1. node's key or data to be checked 2. a boolean typed parameter indicating checked or not. 3. a boolean typed parameter indicating deep or not.
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 (null if no node is highlighted)
getCurrentNodereturn the highlight node's data (null if no node is highlighted)
setCurrentKeyset highlighted node by key, only works when node-key is assigned(key, shouldAutoExpandParent=true) 1. the node's key to be highlighted. If null, cancel the currently highlighted node 2. whether to automatically expand parent node
setCurrentNodeset highlighted node, only works when node-key is assigned(node, shouldAutoExpandParent=true) 1. the node to be highlighted 2. whether to automatically expand parent node
getNodeget node by data or key(data) the node's data or key
removeremove a node, only works when node-key is assigned(data) the node's data or node to be deleted
appendappend a child node to a given node in the tree(data, parentNode) 1. child node's data to be appended 2. parent node's data, key or node
insertBeforeinsert a node before a given node in the tree(data, refNode) 1. node's data to be inserted 2. reference node's data, key or node
insertAfterinsert a node after a given node in the tree(data, refNode) 1. node's data to be inserted 2. reference node's data, key or node

Events

Event NameDescriptionParameters
node-clicktriggers when a node is clickedthree parameters: node object corresponding to the node clicked, node property of TreeNode, TreeNode itself
node-contextmenutriggers when a node is clicked by right buttonfour parameters: event, node object corresponding to the node clicked, node property of TreeNode, TreeNode itself
check-changetriggers when the selected state of the node changesthree parameters: node object corresponding to the node whose selected state is changed, whether the node is selected, whether node's subtree has selected nodes
checktriggers after clicking the checkbox of a nodetwo parameters: node object corresponding to the node that is checked / unchecked, tree checked status object which has four props: checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys
current-changetriggers when current node changestwo parameters: node object corresponding to the current node, node property of TreeNode
node-expandtriggers when current node openthree parameters: node object corresponding to the node opened, node property of TreeNode, TreeNode itself
node-collapsetriggers when current node closethree parameters: node object corresponding to the node closed, node property of TreeNode, TreeNode itself
node-drag-starttriggers when dragging startstwo parameters: node object corresponding to the dragging node, event.
node-drag-entertriggers when the dragging node enters another nodethree parameters: node object corresponding to the dragging node, node object corresponding to the entering node, event.
node-drag-leavetriggers when the dragging node leaves a nodethree parameters: node object corresponding to the dragging node, node object corresponding to the leaving node, event.
node-drag-overtriggers when dragging over a node (like mouseover event)three parameters: node object corresponding to the dragging node, node object corresponding to the dragging over node, event.
node-drag-endtriggers when dragging endsfour parameters: node object corresponding to the dragging node, node object corresponding to the dragging end node (may be undefined), node drop type (before / after / inner), event.
node-droptriggers after the dragging node is droppedfour parameters: node object corresponding to the dragging node, node object corresponding to the dropped node, node drop type (before / after / inner), event.

Slots

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