Tree V2 virtualized treebeta

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

Basic usage

Basic tree structure.

No Data

Selectable

Used for node selection.

No Data

Disabled checkbox

The checkbox of a node can be set as disabled.

In the example, disabled property is declared in defaultProps, and some nodes are set as disabled: true. The corresponding checkboxes are disabled and can't be clicked.

No Data

Default expanded and default checked

Tree nodes can be initially expanded or checked

Use default-expanded-keys and default-checked-keys to set initially expanded and initially checked nodes respectively.

No Data

Custom node content

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

No Data

Tree node filtering

Tree nodes can be filtered

Invoke the filter method of the Tree instance to filter tree nodes. Its parameter is the filtering keyword. Note that for it to work, filter-method is required, and its value is the filtering method.

No Data

TreeV2 Attributes

NameDescriptionTypeDefault
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
iconcustom tree node iconstring | Component
item-size 2.2.33custom tree node heightnumber26

props

AttributeDescriptionTypeDefault
valueunique 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 disabledstringdisabled

TreeV2 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)
setExpandedKeysset certain nodes to be expanded(keys: TreeKey[])
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)
getNodeget node by key or data(data: TreeKey | TreeNodeData)
expandNodeexpand specified node(node: TreeNode)
collapseNodecollapse specified node(node: TreeNode)
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)
scrollTo 2.8.0scroll to a given position(offset: number)
scrollToNode 2.8.0scroll to a given tree key with specified scroll strategy(key: TreeKey, strategy?: auto | smart | center | start | end)

TreeV2 Events

NameDescriptionParameters
node-clicktriggers when a node is clicked(data: TreeNodeData, node: TreeNode, e: MouseEvent)
node-drop 2.8.3triggers when drag someting and drop on a node(data: TreeNodeData, node: TreeNode, e: DragEvent)
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)

TreeV2 Slots

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

Source

ComponentDocs

Contributors