VTree API

VTree Props

Prop	Description	Type	Default Value
value	Selected or checked value. Supports v-model. value will be a string or number in single select mode; a separator separated string or an array in multiple select mode. Multiple select mode takes the priority	string | number | Array<string | number>	None
data	Tree data. It's recommended to use setData method instead of props when the data amount is large	object[]	[]
unloadDataList	The list for querying node title of not loaded but selected nodes. The format is the same as data	object[]	[]
showUnloadCheckedNodes	Whether to show checked nodes that are not loaded after filter	boolean	true
emptyText	No data text	string	'暂无数据'
titleField	Node title field	string	'title'
keyField	Node unique key field	string	'id'
separator	Separator of value in multiple select mode	string	','
checkable	Enable multiple select	boolean	false
selectable	Enable single select	boolean	false
filteredNodeCheckable	Whether the filtered nodes can be checked	boolean	false
cascade	Whether parent nodes and child nodes are cascaded	boolean	true
enableLeafOnly	Whether to enable leaf nodes only. Effective when 'in multiple select mode and cascade is false' or 'in single select mode'	boolean	false
disableAll	Whether to disable all nodes	boolean	false
defaultExpandAll	Whether to expand all nodes by default	boolean	false
defaultExpandedKeys Deprecated	Default expanded keys	Array<string | number>	[]
expandedKeys 2.2.0	Expanded node keys. The component will react to the changes of this prop	Array<string | number>	[]
draggable	Whether nodes can be dragged	boolean	false
droppable	Whether nodes can be dropped	boolean	false
beforeDropMethod	This method will be invoked before node drop. Return true to allow dropping. Return false to prevent from dropping	(dragKey: string | number, dropKey: string | number, hoverPart: 'before' | 'body' | 'after') => boolean	() => true
ignoreMode	Specify the nodes to ignore in getCheckedNodes, getCheckedKeys and v-model	'none' | 'parents' | 'children'	'none'
autoLoad	Whether to auto load root nodes when init	boolean	true
load	async load method	(node: null | TreeNode, resolve: Function, reject: Function) => any	None
render	Node render function	(h: CreateElement, node: TreeNode) => VNode	None
filterMethod	Node filter method	(keyword: string, node: TreeNode) => boolean	None
expandOnFilter 2.1.0	Whether to expand all visible nodes when filter	boolean	true
unselectOnClick 2.1.0	Whether to cancel select when click on selected node	boolean	true
loading	Whether to show loading icon	boolean	false
nodeClassName	Class passed to the root element of the node. Pass a function to customize class for each node	string | object | Array<string | object> | (node: TreeNode) => string | object | Array<string | object>	None
showLine 4.0.0	Whether to show connecting lines. Pass object to specify line width, color, type and polyline. The density of dash dashDensity 4.1.0 ranges from 1 to 10	boolean | { width?: number, type?: 'dashed' | 'solid', color?: string, polyline?: boolean, dashDensity?: number }	None. If not boolean, the default value is { width: 1, type: 'solid', color: '#D3D3D3', polyline: false, dashDensity: 3 }
animation 4.0.0	Whether to enable transition animation. This prop only controls expand/collapse animation currently	boolean	None
nodeMinHeight	Calculate data total height according to node min height	number	30
nodeIndent	Child node indent	number	20
renderNodeAmount	Node amount to render. Not all visible nodes will be rendered when they are more than this prop and the height is more than (node amount the container clientHeight can hold + bufferNodeAmount)	number	100
bufferNodeAmount	Refresh render nodes when scrolled node amount is more than this prop	number	20

VTree Events

Note: Since 2.0.8, the node info returned in events contains the full node info including _parent and children(dataTransfer in drag events excluded).

Event	Description	Return Value
input	Triggers when selected or checked nodes changes	Selected or checked nodes
expand	Triggers when expand/collapse node	Node info
check	Triggers when check node	Checked node info
uncheck	Triggers when cancel check node	Cancel checked node info
checked-change	Triggers when checked nodes changes	All checked nodes (an array)
select	Triggers when select node	Selected node info
unselect	Triggers when cancel select node	Cancel selected node info
selected-change	Triggers when selected node changes	Selected node
click	Triggers when click node	Node info, mouse event
node-dblclick	Triggers when double click node	Node info, mouse event
node-right-click	Triggers when right click node	Node info, mouse event
node-dragstart	Triggers when start dragging node	Node info, drag event
node-dragenter	Triggers when dragenter	Node info, drag event, node part that triggers event 'before' | 'body' | 'after'
node-dragover	Triggers when dragover	Node info, drag event, node part that triggers event 'before' | 'body' | 'after'
node-dragleave	Triggers when dragleave	Node info, drag event, node part that triggers event 'before' | 'body' | 'after'
node-drop	Triggers when drop node	Node info, drag event, node part that triggers event 'before' | 'body' | 'after'

VTree Methods

Method	Description	Params	Return Value
setData	Set tree data to avoid large amount data being proxied by Vue	data: object[]: The same as data prop	void
setChecked	Set multiple select checked/not checked	key: string | number: node key value: boolean: is checked	void
setCheckedKeys	Batch set multiple select checked/not checked	keys: Array<string | number>: node key value: boolean: is checked	void
checkAll	Check all nodes	None	void
clearChecked	Clear checked nodes	None	void
setSelected	Set single select selected/not selected	key: string | number: node key value: boolean: is selected	void
setExpand	Set node expand/collapse	key: string | number: node key value: boolean: is expanded expandParent: boolean = true: whether to expand parent nodes 2.0.6	void
setExpandKeys	Batch set node expand/collapse	keys: Array<string | number>: node key value: boolean: is expanded	void
setExpandAll	Set expand/collapse all	value: boolean: is expanded	void
getCheckedNodes	Get multiple select checked nodes	ignoreMode: 'none' | 'parents' | 'children': ignore part, default value is ignoreMode prop	TreeNode[]
getCheckedKeys	Get multiple select checked node keys	ignoreMode: 'none' | 'parents' | 'children': ignore part, default value is ignoreMode prop	Array<string | number>
getIndeterminateNodes	Get half checked nodes	None	TreeNode[]
getSelectedNode	Get single selected node	None	TreeNode | null
getSelectedKey	Get single selected node key	None	TreeNode | null
getExpandNodes	Get expanded nodes	None	TreeNode[]
getExpandKeys	Get expanded node keys	None	TreeNode[]
getCurrentVisibleNodes	Get current visible nodes	None	TreeNode[]
getNode	Get node by key	key: string | number: node key	TreeNode | null
getTreeData	Get tree format node data	None	TreeNode[]
getFlatData	Get flattened tree data	None	TreeNode[]
getNodesCount	Get total node count	None	number
insertBefore	Insert a node before reference node	insertedNode: node key or single node data referenceKey: string | number: reference node key	TreeNode | null Returns inserted node
insertAfter	Insert a node after reference node	insertedNode: node key or single node data referenceKey: string | number: reference node key	TreeNode | null Returns inserted node
append	Append a node to the first child layer of parent node	insertedNode: node key or single node data parentKey: string | number: parent node key	TreeNode | null Returns inserted node
prepend	Prepend a node to the first child layer of parent node	insertedNode: node key or single node data parentKey: string | number: parent node key	TreeNode | null Returns inserted node
remove	Remove node	removedKey: string | number: node key to remove	TreeNode | null Returns removed node
filter	Filter nodes	keyword: string: filter keyword filterMethod: (keyword: string, node: TreeNode) => boolean: filter method, default to filterMethod prop. if filterMethod prop is not present, it's an internal method that searches node title	void
showCheckedNodes	Show checked nodes	showUnloadCheckedNodes: boolean: whether to show checked nodes that are not loaded, default to prop value	void
loadRootNodes	Load root nodes from remote	None	Promise<void>
updateNode 4.1.0	Update single node	key: string | number: node key newNode: object: new node data, some fields will be ignored, like those start with underscore '_', the key field and indeterminate, visible, isLeaf, etc.	void
updateNodes 4.1.0	Update multiple nodes	newNodes: object[]: new nodes array, some specific fields will be ignored like updateNode, and the elements without key field also will be ignored	void
scrollTo	Scroll to specific node position	key: string | number: node key verticalPosition: 'top' | 'center' | 'bottom' | number: vertical position of scrolling	void

VTree Slots

Name	Description
empty	No data
loading	Icon displayed when loading
node 4.0.0	Custom node, slotProps is { node: TreeNode }

VTree Data Fields

Note: It's better not to override the fields starting with '_' to avoid impact on the internal logic

Field	Description
id	Default key field. You can specify other field as key by setting keyField prop
title	Default display name. You can specify other field as title by setting titleField prop
checked	Whether node is checked in multiple select mode
selected	Whether node is selected in single select mode
indeterminate	Whether node is half checked in multiple select mode
disabled	Whether node is disabled
expand	Effective to parent nodes. Whether node is expanded
visible	Whether node is visible
_filterVisible	Whether is visible after filter. If it's false, the node is not visible in other situations
_parent	Parent node
children	Child node list
isLeaf	Whether is leaf node
_level	Node level, starting from 0
_loading	Whether is loading node
_loaded	Whether node is loaded. Effective when async load