TreeSelect

TreeSelect component combines a tree structure with a dropdown selector for hierarchical data selection.

Basic Usage

Single selection mode. Click on leaf nodes to select.

vue


<TTreeSelect :data="data" v-model="value" placeholder="Please select" />

Set multiple to enable checkbox-based multi-selection. Selecting a parent auto-selects children; partial selection shows indeterminate state.

vue


<TTreeSelect :data="data" v-model="values" multiple />

Set leaf-only to restrict selection to leaf nodes only. Parent nodes toggle expand/collapse on click instead.

vue


<TTreeSelect :data="data" leaf-only placeholder="Please select" />

Set filterable to enable search filtering — type to quickly locate nodes.

vue


<TTreeSelect :data="data" filterable placeholder="Search..." />

Set collapse-tags in multiple mode to display +N when more than 2 items are selected.

vue


<TTreeSelect :data="data" multiple collapse-tags />

Prop	Type	Default	Description
`data`	`TreeSelectOption[]`	`[]`	Tree option data
`v-model`	`string \| number \| (string \| number)[]`	`'' / []`	Selected value
`multiple`	`boolean`	`false`	Multiple selection mode
`leaf-only`	`boolean`	`false`	Select leaf nodes only
`placeholder`	`string`	`'Please select'`	Placeholder text
`size`	`'sm' \| 'lg'`	—	Size
`disabled`	`boolean`	`false`	Disabled state
`clearable`	`boolean`	`false`	Show clear button
`filterable`	`boolean`	`false`	Enable search filter
`collapseTags`	`boolean`	`false`	Collapse selected tags
`defaultExpandAll`	`boolean`	`false`	Expand all nodes by default
`validation`	`'valid' \| 'invalid'`	—	Validation state
`block`	`boolean`	`false`	Full width

Event	Parameters	Description
`change`	`value`	Selection changed