一、先搞懂：树状结构的核心概念
树状结构是倒置的层级化数据表达形式，顶端为根、向下延伸分支与叶子，清晰呈现数据的从属、并列关系，是 B 端结构化信息展示的最优解之一。
1. 核心节点定义
- 根节点：树的唯一起点，树形选择中常隐藏，以标题 / 选项文本替代，避免视觉冗余。
- 子节点：根节点以下的所有节点，无数量限制，是树形选择的核心展示内容。
- 叶节点：无下级子节点的末端节点，是传统单选树的唯一可选对象。
- 分支：节点间的连接关系，可通过线条显隐强化层级感知。
2. 关键属性
- 节点层级：根节点为 1 级，向下依次递增，直观区分数据隶属关系。
- 节点高度：当前节点到最底层叶节点的层级数量。
- 节点深度：当前节点到根节点的路径长度，与层级概念相近。
日常场景中，字典检索、省市县地址、公司组织架构、课程分类，都是典型的树状结构应用，核心价值是快速定位、结构化管理、高效增删改查。
二、树形选择的基础组成
树形选择的结构设计直接影响操作效率，核心由 4 部分构成，每部分都有明确的设计规范：
1. 层级缩进
统一用
8px作为下级节点的缩进基准，清晰区分层级；
数据量大、层级复杂时，搭配
分支线条强化结构，避免视觉混乱。
2. 折叠图标
分为两种样式，适配不同层级场景：
- 三角折叠：适合层级≤3 级的简单场景，轻量化、易理解。
- 方形折叠：搭配分支线条使用，适合 4 级及以上的多层级场景，层级辨识度更高。
3. 选择控件
分单选、多选两类，遵循「简化操作、明确状态」原则：
- 单选：默认隐藏控件，以整个选项文本为热区，点击即选中。
- 多选：必显复选框，置于折叠图标左侧，预留后续功能拓展空间（新增、删除、拖拽等），同时降低前端开发成本、减少 BUG。
4. 选项文本
控制字符长度，超长文本用省略号截断，hover 时展示完整内容，保证界面整洁。
三、树形选择的三大类型（核心差异）
树形选择按交互逻辑分为三类，单选节点树、多选节点树为主流，传统单选树已极少使用。
1. 单选树（淘汰型）
仅支持选择叶节点，需逐层展开才能操作，选择热区小、理解成本高、效率低，仅适用于极特殊的定制场景，不推荐通用设计使用。
2. 单选节点树（主流）
支持选择
任意子节点，选中即代表该节点及下级所有数据，大幅提升效率；
交互拆分为两个独立热区：
- 左侧：折叠图标，仅控制展开 / 收起。
- 右侧：整个选项区域，点击即选中当前节点。
⚠️ 必须添加 hover 状态，通过光标变化提示可点击，降低操作认知成本。
3. 多选节点树（最常用）
在单选节点树基础上增加复选框，支持批量选择多个节点 / 分支；
理论上的「多选树」（仅选叶节点）无实际业务价值，完全可被多选节点树替代；
⚠️ 动态数据场景慎用：如「部门权限自动同步新员工」这类动态关联需求，树形选择无法清晰传递逻辑，需单独做关联配置，避免用户误解。
四、树形选择的核心优势
- 易理解：树状结构认知成本低，用户无需学习即可快速上手。
- 快浏览：大数据量下，可按层级快速筛选，比普通下拉选择效率更高。
- 显结构：清晰呈现数据层级关系，帮助用户快速理解业务框架。
五、设计必避：3 大常见误区
1. 忽视数据量承载
数据量过大时，必须做异步加载、分页、搜索筛选，避免一次性渲染导致卡顿，同时优化滚动体验。
2. 全选功能设计草率
大数据量场景下，全选需增加 **「半选」状态 **（仅选中部分子节点），并明确提示选中数量，避免用户误操作。
3. 缺失键盘交互映射
B 端高效操作需支持键盘快捷键，规范如下：
- ↑：切换上一同级节点，从子节点返回父节点。
- ↓：切换下一同级节点，进入已展开的首个子节点。
- ←：关闭当前节点，返回父节点。
- →：展开子节点，进入首个子节点。
- 回车：确认选中当前聚焦节点。
六、总结
树形选择是 B 端层级数据选择的最优组件，设计核心是简化层级认知、拆分操作热区、适配业务场景：优先用单选 / 多选节点树，放弃传统单选树；多层级加分支线条，大数据量加异步加载，同时补齐键盘交互，最终实现「易看、易点、易懂、高效」的使用体验。
