树选择Tree Select
你可能会说
选项是一层套一层的，得能展开再选。
在可展开的父子列表里勾选一个或多个项目例如设置数据权限时，用户可以展开“公司 → 部门 → 小组”，再跨不同部门勾选需要开放的范围。页面必须说明勾选一个部门是否会同时选中它下面的小组；如果只需沿一条路径选一个结果，用 级联选择器 Cascader 更简单。
也常被叫作TreeSelect
什么时候用
- 按部门分配权限：勾选几个部门的成员研发部 ×2☑ 研发部☑ 前端组☐ 后端组☐ 设计部
- 跨类目多选：数据范围涉及多个分类☑ 服饰☑ 男装☑ 衬衫☐ 数码☑ 家居跨大类勾了 3 个分类
- 父子联动要先定规则：确认父级、子级和半选状态最终提交什么☑ 研发部→ 自动带上整个分支研发部 ×前端组 ×后端组 ×
- 树太大时先搜再选：搜索定位到目标节点前端研发部 / 前端组设计部 / 前端体验组
什么时候不用
- 只选一个叶子节点：使用 级联选择器 Cascader省 / 市 / 区广东省深圳市南山区
- 选项之间没有层级：使用 复选框 Checkbox 平铺前端后端设计
- 只需展示结构而不需要选择：使用 树形控件 Tree▾研发部▸前端组只想看看组织结构，却被要求先选一项
- 数据没有真实父子关系时，使用平铺选择控件而非树选择▾ 北京上海广州城市间没有父子关系，层级是硬编的
组成结构 · Anatomy
研发部▾研发部前端组
用标签回显已勾选的节点
显示完整树状选项的浮层
可展开收起，勾选通常带动子节点
标记选中，「半选」表示部分子项选中
缩进一级，体现从属关系
常见变体 · Variants
单选树Single
▾研发部
前端组
后端组
层级数据里只挑一个节点时用
多选树Multiple
研发部
前端组
后端组
要跨分支勾好几个节点时用
父子联动Cascade Check
▾研发部
前端组
后端组
勾选父级时需要同步选择整个分支
可搜索Searchable
研发部 / 前端组
设计部 / 前端体验组
树太大时先搜出目标节点再勾
典型使用场景
权限分配
角色：运营专员
可查看的数据范围
研发部 ×前端组 ×
▾研发部
前端组
后端组
▸设计部
可见范围设置
分享「Q3 规划文档」
谁可以看
研发部 ×市场部 ×
多类目筛选
内容数据服饰 ×家居 ×
▾服饰
男装
女装
▸家居
部门人员选择
添加评审人
林小hu已选
阿机已选
▾研发部
林小hu
阿机
王大力
延伸阅读 · 权威出处