Tree

A commonly used tree display component, supporting advanced features such as virtual scrolling for massive data, search filtering, and drag-and-drop sorting.

Basic Usage

Node 1

Node 2

Basic Usage

Selection and Disabling

Enable checkboxes via show-checkbox. Setting disabled: true in the data prohibits clicking and selecting that node.

Parents Independent of Children

Setting check-strictly=true ensures that parent and child selection statuses do not influence each other.

Accordion Mode

Set accordion=true to automatically collapse peer nodes when one is expanded.

Level one 1

Level one 2

Accordion Mode

Connection Lines

Use the show-line property to clearly display the hierarchy.

Level one 1

Level two 1-1

Level two 1-2

Level three 1-2-1

Level one 2

Level two 2-1

Level two 2-2

Line Mode

Checkbox Position

Move checkboxes to the right side via checkbox-position.

Async Lazy Loading

Lazy Root

Lazy Loading Demo

Custom Node Class Names

Important Node

Warning Node

Custom Class Names

Custom Expansion Icons

Level one 1

Level one 2

Custom Icons

Custom Node Content

Level one 1Root

Level one 2Root

Custom Content

Custom Prefix and Suffix

1Level one 1

2Level one 2

Prefix and Suffix

Virtual Scrolling (10k+ Data)

Virtual Node 0

Virtual Node 1

Virtual Node 2

Virtual Node 3

Virtual Node 4

Virtual Node 5

Virtual Node 6

Virtual Node 7

Virtual Node 8

Virtual Node 9

Virtual Node 10

Virtual Scrolling

Node Filtering

Level one 1

Level one 2

Tree Node Filtering

Draggable Nodes

Level one 1

Level one 2

Drag and Drop Demo

Multi-selection and Node Retrieval

Custom Field Mapping

Root A

Root B

Field Mapping

Advanced Case: Massive Data Filtering and Selection

Comprehensive Example

Usage in Nuxt

The Tree component fully supports SSR in Nuxt 3/4. When used in a Nuxt project, it is auto-imported.

Nuxt SSR Node 1

Nuxt SSR Node 2

Usage in Nuxt

SSR Considerations:

✅ Data structures are perfectly serialized.
✅ Node expansion states are correctly generated in the SSR environment.
✅ Virtual scrolling is automatically activated on the client.
✅ Event bindings and reactive states work seamlessly.

SSR Safety

Internal virtual scrolling and DOM operations are handled to ensure no browser APIs are triggered on the server, ensuring a smooth transition upon client-side hydration.

API

Props

Name	Description	Type	Default
data	Data source	`TreeNodeData[]`	`[]`
props	Configuration options	`object`	`{ label: 'label', children: 'children', disabled: 'disabled' }`
node-key	Attribute field name used as unique identifier for each tree node	`string`	`'id'`
show-checkbox	Whether nodes can be selected	`boolean`	`false`
checkbox-position	Position of checkbox relative to label	`'left' \| 'right'`	`'left'`
default-expand-all	Whether to expand all nodes by default	`boolean`	`false`
default-expanded-keys	Array of keys for nodes expanded by default	`(string \| number)[]`	`[]`
default-checked-keys	Array of keys for nodes checked by default	`(string \| number)[]`	`[]`
current-node-key	Key of currently selected node (supports v-model)	`string \| number`	`-`
highlight-current	Whether to highlight the currently selected node	`boolean`	`true`
accordion	Whether to allow only one peer node to expand at a time	`boolean`	`false`
indent	Horizontal indentation between adjacent levels in pixels	`number`	`18`
check-strictly	Whether to decouple parent and child checkbox statuses	`boolean`	`false`
expand-on-click-node	Whether to expand/collapse on node click	`boolean`	`true`
check-on-click-node	Whether to check checkbox on node click	`boolean`	`false`
empty-text	Text shown when data is empty	`string`	`'No Data'`
filter-method	Method executed when filtering tree nodes	`(query, node) => boolean`	`-`
lazy	Whether to lazy load child nodes (use with `load`)	`boolean`	`false`
load	Method to load sub-tree data (only for `lazy`)	`(node) => Promise`	`-`
virtual	Whether to enable virtual scrolling	`boolean`	`false`
height	Height of virtual scrolling window (px)	`number`	`400`
item-height	Height of each node (px)	`number`	`30`
show-line	Whether to show connection lines	`boolean`	`false`
draggable	Whether to enable drag-and-drop	`boolean`	`false`

Props Data Mapping

Name	Description	Type	Default
label	Specifies the node label property	`string`	`'label'`
children	Specifies the child nodes property	`string`	`'children'`
disabled	Specifies the checkbox disabled property	`string`	`'disabled'`

TreeNodeData Definition

Name	Description	Type
key	Unique identifier (Required)	`string \| number`
label	Display text (Required)	`string`
children	Array of child nodes	`TreeNodeData[]`
disabled	Whether to disable selection/clicking	`boolean`
isLeaf	Whether this is a leaf node (used in lazy load)	`boolean`
icon	Custom node icon class	`string`
class	Custom node style class	`string`

Events

Name	Description	Parameters
node-click	Triggers when a node is clicked	`(node: TreeNode, e: MouseEvent)`
node-expand	Triggers when a node expands/collapses	`(node: TreeNode, expanded: boolean)`
check	Triggers when checkbox status changes	`(node: TreeNode, checked: boolean, checkedKeys: (string \| number)[])`
current-change	Triggers when selected node changes	`(node: TreeNode \| null)`
node-drag-start	Triggers when dragging starts	`(node: TreeNode, e: DragEvent)`
node-drag-end	Triggers when dragging ends	`(node: TreeNode, dropNode: TreeNode \| null, pos: 'before' \| 'after' \| 'inner', e: DragEvent)`
node-drag-over	Triggers during dragging	`(node: TreeNode, e: DragEvent)`
node-drag-enter	Triggers when entering a node	`(node: TreeNode, e: DragEvent)`
node-drag-leave	Triggers when leaving a node	`(node: TreeNode, e: DragEvent)`
node-drop	Triggers when dropping finishes	`(node: TreeNode, dropNode: TreeNode, type: 'before' \| 'after' \| 'inner', e: DragEvent)`

Slots

Name	Description	Parameters
default	Custom node content	`{ node, data }`
icon	Custom expansion icon	`{ node, data }`
prefix	Custom content prefix	`{ node, data }`
suffix	Custom content suffix	`{ node, data }`
empty	Content when no data	`-`

Note: The node object includes properties like key, label, level, expanded, checked, indeterminate, loading, isLeaf. data refers to the raw data item.

Expose

Name	Description	Parameters/Type
filter	Filter tree nodes	`(query: string)`
getNode	Get node data by key	`(key: string \| number)`
getCheckedNodes	Returns array of currently checked nodes	`-`
getCheckedKeys	Returns array of currently checked keys	`-`
getHalfCheckedNodes	Returns array of currently half-checked nodes	`-`
getHalfCheckedKeys	Returns array of currently half-checked keys	`-`
getCurrentKey	Gets currently selected node's key	`-`
getCurrentNode	Gets currently selected node's data	`-`
setChecked	Set checked status via key	`(key: string \| number, checked: boolean, deep?: boolean)`
setCheckedKeys	Set checked status via keys	`(keys: (string \| number)[])`
setCheckedNodes	Set checked status via nodes	`(nodes: TreeNodeData[])`
setCurrentKey	Set current selected node via key	`(key: string \| number \| undefined)`
setExpandedKeys	Set expanded keys	`(keys: (string \| number)[])`
setData	Manually set tree data	`(data: TreeNodeData[])`
expandNode	Expand specific node	`(key: string \| number)`
collapseNode	Collapse specific node	`(key: string \| number)`
scrollTo	Scroll to position (virtual scroll only)	`(options: number \| ScrollToOptions)`
scrollToNode	Scroll to specific node	`(key: string \| number)`
expandedKeys	Set of currently expanded keys	`Ref<Set<string \| number>>`
checkedKeys	Set of currently checked keys	`Ref<Set<string \| number>>`

Theme Variables

Variable	Description	Default
`--yh-tree-node-height`	Node height	`28px`
`--yh-tree-text-color`	Text color	`var(--yh-text-color-primary)`
`--yh-tree-hover-bg`	Hover background	`var(--yh-color-primary-light-9)`
`--yh-tree-current-bg`	Highlighted node background	`var(--yh-color-primary-light-8)`

Tree ​

Basic Usage ​

Selection and Disabling ​

Parents Independent of Children ​

Accordion Mode ​

Connection Lines ​

Checkbox Position ​

Async Lazy Loading ​

Custom Node Class Names ​

Custom Expansion Icons ​

Custom Node Content ​

Custom Prefix and Suffix ​

Virtual Scrolling (10k+ Data) ​

Node Filtering ​

Draggable Nodes ​

Multi-selection and Node Retrieval ​

Custom Field Mapping ​

Advanced Case: Massive Data Filtering and Selection ​

Usage in Nuxt ​

API ​

Props ​

Props Data Mapping ​

TreeNodeData Definition ​

Events ​

Slots ​

Expose ​

Theme Variables ​

Tree

Basic Usage

Selection and Disabling

Parents Independent of Children

Accordion Mode

Connection Lines

Checkbox Position

Async Lazy Loading

Custom Node Class Names

Custom Expansion Icons

Custom Node Content

Custom Prefix and Suffix

Virtual Scrolling (10k+ Data)

Node Filtering

Draggable Nodes

Multi-selection and Node Retrieval

Custom Field Mapping

Advanced Case: Massive Data Filtering and Selection

Usage in Nuxt

API

Props

Props Data Mapping

TreeNodeData Definition

Events

Slots

Expose

Theme Variables