搜索组件...⌘K

TreeSelect 树选择

用于从树形结构中选择数据，支持搜索、多选、自定义字段等。

基础用法

通过 v-model 绑定选中值，data 设置树形数据：

请选择

选中：未选择

不同尺寸

设置 size 属性使用三种预设尺寸：

Small

Medium

Large

可清除

设置 clearable 允许清除已选项：

Vue 团队×

搜索功能

设置 searchable 开启搜索，输入关键词过滤树节点：

可搜索

多选模式

设置 multiple 开启多选，改为勾选模式，以标签展示已选项：

测试组 ×人事部 ×

选中：qa, hr

默认展开全部

设置 default-expand-all 展开所有树节点：

默认展开

自定义字段

通过 key-field、label-field、children-field 自定义数据字段名：

自定义字段

选中：未选择

禁用选项

在 data 中设置 disabled: true 禁用特定节点：

含禁用项

无边框与加载中

设置 borderless 移除边框，loading 显示加载状态：

无边框

加载中

组合使用

在卡片中结合其他组件构建部门选择场景：

选择部门

Props

参数	类型	默认值	说明
`modelValue`	`any`	`undefined`	选中值（v-model），单选为 key，多选为 key[]
`data`	`TreeData[]`	`[]`	树形数据
`placeholder`	`string`	`'请选择'`	占位文本
`disabled`	`boolean`	`false`	是否禁用
`clearable`	`boolean`	`false`	是否可清除
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	尺寸
`keyField`	`string`	`'key'`	节点唯一标识字段名
`labelField`	`string`	`'label'`	节点显示文本字段名
`childrenField`	`string`	`'children'`	子节点字段名
`multiple`	`boolean`	`false`	是否多选
`searchable`	`boolean`	`false`	是否可搜索
`defaultExpandAll`	`boolean`	`false`	是否默认展开所有节点
`borderless`	`boolean`	`false`	是否无边框
`loading`	`boolean`	`false`	是否加载中
`error`	`boolean`	`false`	是否错误状态
`cascade`	`boolean`	`true`	多选时是否级联勾选（预留）

Events

事件名	类型	说明
`update:modelValue`	`(value: any) => void`	选中值变化时触发
`change`	`(value: any) => void`	选中值变化时触发
`search`	`(value: string) => void`	搜索关键词变化时触发