TreeSelect 树形选择器

树形选择器组件，将树形结构与下拉选择器结合，用于层级数据的选取。

---

基础用法

单选树形选择，点击叶子节点完成选择。

<TTreeSelect :data="data" v-model="value" placeholder="请选择" />

---

多选模式

设置 multiple 开启多选。选中父节点自动联动子节点，子节点部分选中时父节点显示半选状态。

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

---

仅末级可选

设置 leaf-only 禁止选择父节点，仅叶子节点可被选中。父节点点击仅展开/折叠。

<TTreeSelect :data="data" leaf-only placeholder="请选择" />

---

可搜索

设置 filterable 开启搜索过滤，输入关键词快速定位节点。

<TTreeSelect :data="data" filterable placeholder="搜索..." />

---

折叠标签

多选模式下设置 collapse-tags 将超过 2 个的选中项折叠为 +N 显示。

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

---

API

Props

属性	类型	默认值	说明
data	TreeSelectOption[]	[]	树形选项数据
v-model	string | number | (string | number)[]	'' / []	选中值
multiple	boolean	false	多选模式
leaf-only	boolean	false	仅允许选择末级节点
placeholder	string	'请选择'	占位符
size	'sm' | 'lg'	—	尺寸
disabled	boolean	false	禁用
clearable	boolean	false	可清空
filterable	boolean	false	可搜索过滤
collapseTags	boolean	false	多选时折叠标签
defaultExpandAll	boolean	false	默认展开所有节点
validation	'valid' | 'invalid'	—	验证状态
block	boolean	false	块级宽度

Emits

事件	参数	说明
change	value	选中值变化

TreeSelectOption

属性	类型	说明
label	string	显示文本
value	string | number	选项值
children	TreeSelectOption[]	子节点
disabled	boolean	禁用