TreeSelect 树选择器
规则
基础示例
多选可勾选
形态示例
整段禁用
尺寸对比(小 / 中 / 大)
Events
value:string | string[](多选 / 勾选时为数组)
Props
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| allowClear | 清除按钮 | boolean | | false | - |
| classes | 语义化 class | Record<SemanticDOM, string> | function | - | - |
| styles | 语义化 style | Record<SemanticDOM, CSSProperties> | function | - | - |
| rootClass | 根节点 class | string | - | - |
| defaultOpen | 默认展开下拉 | boolean | - | - |
| defaultValue | 默认值 | string | string[] | - | - |
| disabled | 禁用 | boolean | false | - |
| popupMatchSelectWidth | 下拉同宽 / 虚拟滚动 | boolean | number | true | - |
| popupRender | 自定义下拉 | function | - | - |
| fieldNames | 自定义字段 | object | 默认 label/value/children | - |
| getPopupContainer | 渲染父节点 | function | () => document.body | - |
| labelInValue | value 含 label | boolean | false | - |
| listHeight | 列表高度 | number | 256 | - |
| loadData | 异步加载 | (node: DataNode) => Promise<void> | - | - |
| maxTagCount | tag 数量 | number | responsive | - | - |
| maxCount | 最多选中(multiple) | number | - | - |
| maxTagPlaceholder | tag 占位 | VueNode | function | - | - |
| maxTagTextLength | tag 文本长度 | number | - | - |
| multiple | 多选(treeCheckable 时自动 true) | boolean | false | - |
| notFoundContent | 空数据 | VueNode | Not Found | - |
| open | 展开 | boolean | - | - |
| placeholder | 占位 | string | - | - |
| placement | 弹出位置 | 见文档 | bottomLeft | - |
| prefix | 前缀 | VueNode | - | - |
| showCheckedStrategy | 回填策略 | SHOW_ALL | SHOW_PARENT | SHOW_CHILD | SHOW_CHILD | - |
| showSearch | 搜索 | boolean | Object | 单 false / 多 true | - |
| size | 尺寸 | large | middle | small | - | - |
| status | 校验状态 | error | warning | - | - |
| variant | 形态变体 | outlined | borderless | filled | underlined | outlined | - |
| suffixIcon | 后缀图标 | VueNode | DownOutlined | - |
| switcherIcon | 展开图标 | VueNode | function | - | - |
| tagRender | 自定义 tag | function | - | - |
| treeCheckable | 显示 Checkbox | boolean | false | - |
| treeCheckStrictly | 父子独立选中 | boolean | false | - |
| treeData | 树数据 | array | [] | - |
| treeDataSimpleMode | 简单模式 | boolean | object | false | - |
| treeTitleRender | 自定义节点 | function | - | - |
| treeDefaultExpandAll | 默认展开全部 | boolean | false | - |
| treeDefaultExpandedKeys | 默认展开 keys | string[] | - | - |
| treeExpandAction | 展开触发 | false | click | doubleClick | false | - |
| treeExpandedKeys | 受控展开 | string[] | - | - |
| treeIcon | 节点前图标 | boolean | false | - |
| treeLine | 展示线条 | boolean | object | false | - |
| treeLoadedKeys | 已加载(配合 loadData) | Key[] | [] | - |
| treeNodeLabelProp | 显示字段 | string | title | - |
| value | 选中值 | string | string[] | - | - |
| virtual | 虚拟滚动 | boolean | true | - |
| bordered | 已废弃 | boolean | - | - |
| showArrow | 已废弃 | boolean | - | - |
Events
| 事件 | 说明 | 类型 | 版本 |
|---|---|---|---|
| change | 选中变化 | (value, label, extra) => void | - |
| openChange | 下拉展开 | (open: boolean) => void | - |
| select | 选中节点 | (value, node, extra) => void | - |
| treeExpand | 节点展开 | (expandedKeys) => void | - |
| popupScroll | 列表滚动 | (event: UIEvent) => void | - |


