Table 表格

行列形式展示一组结构化的数据或内容。

适用：用于大量数据展示或需要横纵对比的场景。
不适用：非结构化数据的展示或无横纵对比诉求的场景，此时可用列表。

通用原则

• 表格中允许展示静态数据或操作；允许单列折叠展开；允许批量操作
  
• 高度根据内容自适应
  
• 表格中信息重要层级从左到右依次递减
  
• 左侧第一栏通常为标题，操作栏放于最右侧；标题栏和操作栏可固定，只滚动内容区
  
• 表头的标题保证简洁可读，不可折行，尽量避免「...」
  
• 表头可在批量操作时变为操作栏

构成

1. 操作：当有滚动条的时候，表头可吸顶。
   1. 左侧为表格操作，默认操作数不超过 3 个，第 4 个操作收到「 更多 」中，可搭配图标，未勾选时批量操作状态为 Disable
   2. 右侧为简易搜索框、高级搜索开关、表格刷新按钮及展示列设置按钮
2. 表头：当有滚动条的时候，表头可吸顶。
   1. 批量勾选（可选）：默认一直出现，用户随时勾选后，批量操作按钮由 Disable 状态变为 Normal 状态
   2. 列标题：
      1. 言简意赅，不允许折行，可带单位，如「 数量(个) 」，超过可「 ... 」；建议不超过 6 个汉字
      2. 有左右滚动条的时候，首列允许固定
   3. 操作列：有左右滚动条的时候，允许固定
3. 内容区：允许上下左右滚动。
   1. 序列 / 多选（可选）
   2. 展开/收起（有树形结构的时候使用）
      
   3. 单行操作：操作数默认不超过 4 个，第 5 个操作收起到「 更多 」中
4. 分页

行为

批量操作

• 当表格支持批量操作时，应出现 Checkbox 列
  
• 批量操作区出现在表格之上
• 操作按钮允许搭配图标

方式1：点击表头的全选 Checkbox

• 列表进入批量操作状态
  
• 所有行全部被选中
  
• 再次点击反选所有列，退出批量操作状态，回到正常状态

方式2：选择单列

• 选中列表最左侧的 checkbox，进入批量操作状态
  
• 表头的全选 Checkbox 为半选状态
  
• 此时点击表头全选 Checkbox 为选择所有列，再次点击表头全选 Checkbox 为清除所有选择，退出批量操作状态，回到正常状态
  

单列操作

• 列操作通常包括排序、筛选、拖拽列宽度等常规操作
• 表格数据为空时，批量操作均不可用
• 支持的操作有解释说明、排序、筛选
• 解释说明：移入「解释说明 icon」出现 Tooltip ，对标题进行解释

• 排序：
  • 点击列标题或「排序图标」即生效
    
  • 可反复点击在正排、倒排、默认排序中切换
    
  • 生效的时候，「排序图标」须展示在列标题右侧且高亮
    

• 筛选：
  • 若当前列支持筛选，鼠标 hover 列标题出现「筛选 icon」
    
  • 点击「筛选 icon」唤起进一步操作
    
  • 生效的时候，「筛选 icon」须展示在列标题右侧且高亮
    
  • 当筛选规则失效的时候，「筛选 icon」消失，并回到默认状态
    

调整列宽度

• 鼠标移入列标题栏的分割线时，可直接拖拽分隔线，调整列宽度
  
• 单列可根据业务需要设定最小/大宽度
  

单行操作

• 操作采用文字按钮
• 操作数默认不超过 4 个，第 5 个操作收起到「 更多 」中

展开/收起

• 展开收起表格取消表格斑马线
• 当列收起时，点击「 + 」展开下一级
  
• 当列展开时，点击「 - 」收起所有下一级
  

容器相关

• 三大状态：单列有 Normal、Hover、Selected 3 种状态

• 加载：内容区加载
  

• 空列表

样式

布局

• 可在独立页面、弹窗、滑块面板（SlidePanel）中使用
  
• 表格标题的对齐应与内容对齐
  
• 内容行：文字和图标首选左对齐，若数字内容中不会出现小数点则首选右对齐。有小数点则小数点对齐