TreeSelect

Supports extreme virtual scrolling retrieval.

When data is massive or follows a clear hierarchical structure, TreeSelect provides an efficient selection solution within a compact space.

Basic Usage

Standard single-selection mode. By default, only leaf nodes can be selected; clicking parent nodes automatically expands or collapses them.

Value:

Basic Selection

Disabled State

You can disable the entire component or specific nodes (like "QA Team" in this demo) via the disabled field in your data.

Disabled State

Clearable

Setting the clearable property displays a clear button on hover.

Frontend Team

Value: 1-1-1

Clearable

Multiple Selection and Tag Folding

Use multiple to enable multi-selection. Using collapse-tags is recommended for saving space.

Value: []

Multi-Selection

Select Any Level

Enabling check-strictly allows users to select any node regardless of whether it is a leaf.

R&D Center

Value: 1-1

Any Level Selection

Checkbox Mode

Use show-checkbox to provide a clearer visual selection state in multi-selection scenarios.

Value: []

Checkbox Mode

Filterable

With filterable enabled, users can type keywords directly into the input to filter nodes.

Search Filter

Lazy Loading

Set lazy and provide a load function to asynchronously load child nodes, which is very useful for large organization charts.

Lazy Loading

Custom Content

Use the #default slot to fully customize how tree nodes appear in the menu.

Custom Slot

Virtual Scrolling (10,000+ Nodes)

Built-in proprietary virtual scrolling. To optimize performance, virtual scrolling is disabled by default. For large datasets (recommended for 500+ items), set virtual to true.

Basic Search Demo

Value Count: 0

Massive Data Search

Checkbox Mode

Even with massive data, cascaded checkbox selections remain smooth.

Checked Count: 0

Massive Data Checklist

Usage in Nuxt

TreeSelect is fully compatible with Nuxt 3/4. Thanks to the Auto Import feature, you can use it directly in templates.

Nuxt Usage

SSR Considerations:

• ✅ Initial tree structure rendering (including expand/collapse state) is supported.
• ✅ Selected Tokens render correctly on the server.
• ✅ Virtual scrolling displays initial nodes on first load.
• ✅ Lazy load initial data supports SSR.
• 💡 Filter functionality and async loading activate after client-side hydration.

SSR Safety

TreeSelect utilizes Vue 3.5's native useId mechanism, ensuring node IDs and ARIA attributes stay identical between server and client even in complex recursive structures, avoiding common hydration errors.

API

TreeSelect Attributes

Name	Description	Type	Default
model-value / v-model	Binding value	string | number | (string | number)[]	—
data	Display data	TreeOption[]	[]
props	Configuration options	object	—
node-key	Unique identifier attribute for each node; should be unique across the tree	string	'value'
multiple	Whether multiple selection is allowed	boolean	false
clearable	Whether to allow clearing of the selection	boolean	false
disabled	Whether disabled	boolean	false
size	Input size	'large' | 'default' | 'small'	'default'
placeholder	Placeholder text	string	'Please select'
empty-text	Text shown when there is no data	string	'No Data'
filterable	Whether list is searchable	boolean	false
filter-node-method	Custom filter method	(value: string, data: TreeOption, node: any) => boolean	—
collapse-tags	Whether to fold tags in multi-select	boolean	false
collapse-tags-tooltip	Whether to show a tooltip for folded tags (displaying count)	boolean	false
max-collapse-tags	Max tags displayed before folding	number	1
check-strictly	Whether to decouple parent and child checkbox statuses	boolean	false
show-checkbox	Whether to show checkboxes before nodes	boolean	false
default-expand-all	Whether to expand all nodes by default	boolean	false
default-expanded-keys	Initial keys for expanded nodes	TreeKey[]	[]
accordion	Whether to expand only one peer node at a time	boolean	false
indent	Horizontal indent between levels	number	16
check-on-click-node	Whether to check checkbox on node click	boolean	false
expand-on-click-node	Whether to expand/collapse on node click	boolean	true
lazy	Whether to enable lazy loading	boolean	false
load	Function for loading subtree data	Function	—
virtual	Whether to enable virtual scrolling	boolean	false
height	Max height of the dropdown menu	string | number	274
item-size	Height of each item for virtual scrolling	number	34
teleported	Whether to mount the dropdown to body	boolean	true
popper-class	Custom class for popper	string	—
status	Validation status for the input	'success' | 'warning' | 'error' | ''	—

TreeSelect Props (Config Options)

Name	Description	Type
label	Specifies the node label property	string
value	Specifies the selection value property	string
children	Specifies the child nodes property	string
disabled	Specifies the node disabled status property	string
isLeaf	Specifies if a node is a leaf (only for lazy load)	string

TreeSelect Events

Name	Description	Parameters
change	Triggers when the selection changes	(value: any) => void
visible-change	Triggers when the dropdown visibility changes	(visible: boolean) => void
clear	Triggers when the clear button is clicked	—
node-click	Triggers on node click	(data: TreeOption, node: TreeNode, e: MouseEvent) => void
check-change	Triggers when a checkbox state changes	(data: TreeOption, checked: boolean, indeterminate: boolean) => void
check	Triggers on checkbox click	(data: TreeOption, info: any) => void

TreeSelect Slots

Name	Description	Parameters
default	Custom content for tree nodes	{ node: TreeNode, data: TreeOption }
prefix	Custom input prefix content	—
empty	Content for empty/no-matching-data states	—

Theme Variables

Variable Name	Description	Default
--yh-tree-select-node-hover-bg	Node background color on hover	var(--yh-fill-color-light)
--yh-tree-select-node-selected-color	Text color for selected nodes	var(--yh-color-primary)