树选择TreeSelect
填写与选择从可展开的层级列表中选择一个或多个项目
树选择适合部门、类目和权限范围等有父子关系的选项。使用前要说明选择父节点是否包含子节点、半选表示什么，以及最终提交哪一层数据。
研发部前端组
▾研发部
前端组
后端组
服务端
▸设计部
什么时候用
- 按部门分配权限：勾选几个部门的成员研发部 ×2☑ 研发部☑ 前端组☐ 后端组☐ 设计部
- 跨类目多选：数据范围涉及多个分类☑ 服饰☑ 男装☑ 衬衫☐ 数码☑ 家居跨大类勾了 3 个分类
- 父子联动要先定规则：确认父级、子级和半选状态最终提交什么☑ 研发部→ 自动带上整个分支研发部 ×前端组 ×后端组 ×
- 树太大时先搜再选：搜索定位到目标节点前端研发部 / 前端组设计部 / 前端体验组
什么时候不用
- 只选一个叶子节点 → 用 级联选择器 Cascader 更轻省 / 市 / 区广东省深圳市南山区
- 选项之间没有层级 → 用 复选框 Checkbox 平铺前端后端设计
- 只是想展示结构，不需要选 → 用 树形控件 Tree▾研发部▸前端组只想看看组织结构，却被要求先选一项
- 数据没有真实父子关系时，不要强行做成树▾ 北京上海广州城市间没有父子关系，层级是硬编的
组成结构 · Anatomy
研发部▾研发部前端组
1触发框Trigger用标签回显已勾选的节点
2树面板Tree Panel显示完整树状选项的浮层
3父节点Parent Node可展开收起，勾选通常带动子节点
4勾选框Checkbox标记选中，「半选」表示部分子项选中
5子节点Child Node缩进一级，体现从属关系
常见变体 · Variants
单选树Single
▾研发部
前端组
后端组
层级数据里只挑一个节点时用
多选树Multiple
研发部
前端组
后端组
要跨分支勾好几个节点时用
父子联动Cascade Check
▾研发部
前端组
后端组
勾父级想一键带走整个分支
可搜索Searchable
研发部 / 前端组
设计部 / 前端体验组
树太大时先搜出目标节点再勾
典型使用场景
权限分配
角色：运营专员
可查看的数据范围
研发部 ×前端组 ×
▾研发部
前端组
后端组
▸设计部
可见范围设置
分享「Q3 规划文档」
谁可以看
研发部 ×市场部 ×
多类目筛选
内容数据服饰 ×家居 ×
▾服饰
男装
女装
▸家居
部门人员选择
添加评审人
林小hu已选
阿机已选
▾研发部
林小hu
阿机
王大力