Tree Component

Tree component is used to display hierarchical data, supporting interactive operations such as selection, expand/collapse, suitable for folders, organizational structures, category management and other scenarios.

Basic Usage

Basic tree component usage, displaying hierarchical data.

Show Code

Selectable Tree

Set the checkable attribute to true to display checkboxes and enable node selection functionality.

Currently Selected Nodes:

No nodes selected

Show Code

Default Expanded and Checked

You can set default expanded and checked nodes through the expanded and checked attributes.

Default expanded nodes: Level 1 Node 1, Level 2 Node 1-1
Default selected nodes: Level 3 Node 1-1-2, Level 2 Node 2-1

Show Code

Accordion Mode

Set the accordion attribute to true to enable accordion mode, where only one sibling node can be expanded at a time.

Normal Mode:

Accordion Mode:

Show Code

Disabled State

Set the disabled attribute to disable the entire tree, or set the disabled field in the data to disable specific nodes.

Individual Node Disabled:

Entire Tree Disabled:

Show Code

Custom Node Content

You can customize node content and styles through the default slot.

Show Code

Control Node Expansion

You can control whether to expand/collapse nodes when clicking on them by setting the expand-on-click-node attribute.

Click Node to Expand/Collapse:

Click Arrow Only to Expand/Collapse:

You can control the expand/collapse behavior by setting the expand-on-click-node property:

• true: Expand/collapse when clicking on the node (default behavior)
• false: Only expand/collapse by clicking the arrow icon

Show Code

Tree API

Attributes

Attribute	Description	Type	Accepted Values	Default
data	Data to be displayed	array	—	[]
node-key	Unique identifier attribute for each tree node	string	—	id
label	Specify node label as a property value of node object	string	—	label
children	Specify subtree as a property value of node object	string	—	children
expanded	Array of keys of nodes that are expanded by default	array	—	[]
checked	Array of keys of nodes that are checked by default	array	—	[]
indent	Horizontal indentation between adjacent level nodes in pixels	number	—	16
checkable	Whether nodes can be checked	boolean	—	false
accordion	Whether to open only one sibling tree node at a time	boolean	—	false
expand-on-click-node	Whether to expand or collapse node when clicking on it	boolean	—	true
disabled	Whether to disable the entire tree	boolean	—	false

Events

Event Name	Description	Parameters
node-expand	Triggered when node is expanded	(nodeData, node)
node-collapse	Triggered when node is collapsed	(nodeData, node)
check-change	Triggered when node check state changes	(checkedKeys: string[])

Methods

Method Name	Description	Parameters
getCheckedKeys	Get currently checked node keys	—
getCheckedNodes	Get currently checked node data	—
setCheckedKeys	Set checked node keys	(keys: string[])
expandAll	Expand all nodes	—
collapseAll	Collapse all nodes	—

Slots

Slot Name	Description	Scope Parameters
default	Custom tree node content	{ node: TreeNodeType, data: object }
empty	Custom content when tree is empty	—

Data Structure

Each node object should contain the following fields:

interface NodeData {
  [nodeKey: string]: string; // Unique identifier, default is id
  [label: string]: string;   // Text displayed by node, default is label
  [children: string]?: NodeData[]; // Child nodes, default is children
  disabled?: boolean;        // Whether to disable node
}

Style Variables

The tree component uses the following style variables, which can be customized through SCSS variables:

Variable Name	Description
$font-size-default	Default font size
$text-color-default	Default text color
$border-color-default	Default border color
$bg-color-default	Default background color
$bg-color-hover	Hover background color
$theme-color-primary	Theme color - Primary