Tree

Tree component for displaying hierarchical data such as file directories, organization structures, and category navigation.

---

Basic Usage

<TTree :data="data" v-model:expanded-keys="expandedKeys" />

---

Default Expand All

<TTree :data="data" default-expand-all />

---

With Checkbox

<TTree :data="data" show-checkbox v-model:checked-keys="checkedKeys" />

---

Accordion Mode

<TTree :data="data" accordion />

---

Variant

Set variant="flush" to remove outer border and border-radius, keeping only item separators. Ideal for embedding in cards or sidebars.

<TTree :data="data" variant="flush" />

---

Check Mode

The check-mode prop controls checkbox linkage behavior:

• cascade (default): Full parent-child linkage. Checking a parent selects all children; checking any child marks the parent as indeterminate.
• parent-link: Children auto-check the parent, but parent toggling doesn't affect children.
• independent: Each node is independent with no linkage.

<TTree :data="data" show-checkbox check-mode="cascade" />
<TTree :data="data" show-checkbox check-mode="parent-link" />
<TTree :data="data" show-checkbox check-mode="independent" />

---

API

Props

Prop	Type	Default	Description
data	TreeNode[]	[]	Tree data
node-key	string	'id'	Node unique key field
children	string	'children'	Children field name
label-key	string	'label'	Label field name
default-expand-all	boolean	false	Expand all parent nodes
expanded-keys	(string | number)[]	[]	Expanded node keys
checked-keys	(string | number)[]	[]	Checked node keys
show-checkbox	boolean	false	Show checkbox
check-mode	'independent' | 'parent-link' | 'cascade'	'cascade'	Checkbox linkage mode
variant	'default' | 'flush'	'default'	Visual variant
accordion	boolean	false	Accordion mode
indent	number	24	Indent per level (px)

TreeNode

Field	Type	Description
id	string | number	Unique identifier
label	string	Display text
children	TreeNode[]	Child nodes
disabled	boolean	Disabled state
icon	Component	Node icon

Emits

Event	Parameters	Description
update:expanded-keys	keys	Expanded keys changed
update:checked-keys	keys	Checked keys changed
node-click	node, event	Node clicked
node-expand	node	Node expanded
node-collapse	node	Node collapsed