适用：任何需要通过层级组织的信息场景，如文件夹、组织架构、生物分类、国家地区等等。

通用原则

• 常使用两栏式布局，通常左侧配置树形组件来切换右侧内容

• 树结构逐级展开，清晰体现信息层级关系

• Tree 子项中的可操作元素只能通过鼠标操作，不可聚焦，它们应该是表示性的，键盘不能操作到

• 上下、左右滚动条根据实际需要出现（如可以点击二级菜单后出先滚动条）

• 可搭配搜索组件一起使用

类型

类型	何时使用
单选	主要为了展示信息间层级关系，允许一次选中一个结点
多选	作为选项使用，允许一次跨层级选中多个结点

单选

• 用来展示、呈现结构关系

• 每个结点允许选中（类似菜单功能）

多选

• 除了展现结构，每个结点均可被选中，选中后可进行其他操作。

• 可增加「全选」模块

构成

1. 树结构

   1. 箭头：点击展开/收起下一级信息

   2. 竖线（可选）：帮助用户视觉对齐

2. 结点

   1. 多选框（可选）

      1. 拥有 3 种选择状态：全选、未选、半选

   2. 信息

      1. 静态展示场景下，需区分 2 种状态：选中、未选中

3. 全选（可选）：多选场景下使用

行为

展开

当树处于折叠状态时：

• 点击「箭头」，展开子层级

• 点击「结点信息」可以在选中当前结点的同时，展开子层级

收起

当树处于展开状态时：

• 点击「展开标识」，收起其子层级及以下所有树结构

• 点击「结点信息」可以在选中当前结点的同时，收起其子层级及以下所有树结构

选择结点信息

• 父子联动

  • 选父则全部选择子层级

  • 当子部分被选中的时候，父为半选状态

  • 半选状态下，再次点击为清空

• 父子不联动

  • 每一个结点可独立被选中，不受父子关系影响

全选

适用于在多选：

• 点击全选，全部选中

• 再次点击全选，全部清除

拖拽排序

长按任意列，可直接拖拽至可视范围内的其他位置，拖拽有 2 种结果：

• 插空

  • 拖拽到结点与结点之间

  • 当且仅当有辅助线出现时，才能明确放置位置；没有辅助线出现，则视为无效拖拽。

• 设为子级

  • 拖拽为某结点的子级

  • 当且仅当某列被「点亮」时，才能明确放置对象，否则视为无效拖拽。

实践案例

---

样式

布局