Tree 树形控件

体现父子层级关系的信息组织方式。

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

通用原则

• 常使用两栏式布局，通常左侧配置树形组件来切换右侧内容
  
• 树结构逐级展开，清晰体现信息层级关系
  
• Tree 子项中的可操作元素只能通过鼠标操作，不可聚焦，它们应该是表示性的，键盘不能操作到
  
• 上下、左右滚动条根据实际需要出现（如可以点击二级菜单后出先滚动条）
  
• 可搭配搜索组件一起使用

类型

单选

• 用来展示、呈现结构关系
  
• 每个结点允许选中（类似菜单功能）
  

多选

• 除了展现结构，每个结点均可被选中，选中后可进行其他操作。
  
• 可增加「全选」模块
  

构成

1. 树结构
   1. 箭头：点击展开/收起下一级信息
      
   2. 竖线（可选）：帮助用户视觉对齐
      
2. 结点
   1. 多选框（可选）
      1. 拥有 3 种选择状态：全选、未选、半选
   2. 信息
      1. 静态展示场景下，需区分 2 种状态：选中、未选中
3. 全选（可选）：多选场景下使用

行为

展开

当树处于折叠状态时：

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

收起

当树处于展开状态时：

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

选择结点信息

• 父子联动
  • 选父则全部选择子层级
    
  • 当子部分被选中的时候，父为半选状态
    
  • 半选状态下，再次点击为清空
    
• 父子不联动
  • 每一个结点可独立被选中，不受父子关系影响

全选

适用于在多选：

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

拖拽排序

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

• 插空
  • 拖拽到结点与结点之间
    
  • 当且仅当有辅助线出现时，才能明确放置位置；没有辅助线出现，则视为无效拖拽。
    
• 设为子级
  • 拖拽为某结点的子级
    
  • 当且仅当某列被「点亮」时，才能明确放置对象，否则视为无效拖拽。