适用：用于大量数据展示或需要横纵对比的场景。
不适用：非结构化数据的展示或无横纵对比诉求的场景，此时可用列表。
通用原则
-
表格中允许展示静态数据或操作；允许单列折叠展开；允许批量操作
-
具有高度自定义的特性，设计师按场景所需灵活组合
-
表格中信息重要层级从左到右依次递减
-
左侧第一栏通常为标题，操作栏放于最右侧；标题栏和操作栏可固定，只滚动内容区
-
表头的标题保证简洁可读，不可折行，尽量避免「...」
-
表头可在批量操作时变为操作栏
构成
表头
当有滚动条的时候，表头可吸顶。
-
批量勾选（可选）
- 默认一直出现，用户随时勾选后进入批量操作状态
-
列标题+单列操作
-
列标题：不允许折行，超过可「...」；建议不超过 6 个汉字
-
单列操作
-
默认不出现，仅在鼠标 hover 单列标题栏出现
-
当前列表生效的规则须默认展示（比如倒序），方便用户快速了解当且列表的数据规则
-
操作数默认不超过 2 个，更多的须收起到「···」中
-
-
-
批量操作
-
默认不出现，仅在进入批量操作状态时出现
-
需展示当前已选列数量（紧跟在全选 Checkbox右边）
-
内容区
允许上下左右滚动。
-
序列 / 多选（可选）
-
默认不出现或为序列号，鼠标 hover 时多选框才出现，点击后进入批量操作状态
-
全选时，自动出现并勾选
-
-
展开/收起（有树形结构的时候使用）
-
单行操作
-
操作按钮建议不超过 2 个，超过须收起到「···」中，或使用
下拉按钮 -
有左右滚动条的时候，允许固定
-
行为
01. 批量操作
-
当表格处于批量操作状态时，所有列均出现 Checkbox
-
批量操作区出现在表头，覆盖原有列标题（操作区允许在表格之外，根据业务需要选择）或在表格外出现
-
全选 Checkbox 右边须展示「已选择 x 项」
方式1：点击表头的全选 Checkbox
-
列表进入批量操作状态
-
所有行全部被选中
-
批量操作出现，并覆盖表头的列标题
-
反选所有列，退出批量操作状态，回到正常状态
方式2：选择单列
-
鼠标 hover 单行，列表最左侧出现 checkbox，点击选中，进入批量操作状态
-
所有列前面出现 Checkbox
-
表头的全选 Checkbox 为半选状态
-
此时点击全选 Checkbox 为清除所有选择，退出批量操作状态，回到正常状态
02. 单列操作
-
列操作通常包括排序、筛选、拖拽列宽度等常规操作，也允许根据业务需要，定制业务操作。
-
列操作的顺序从左往右依次为：排序、筛选、更多
-
一个列表默认只生效一种规则，即多列操作之间是 or 的关系（特殊情况允许 and）
-
当表格数据为空的时候，表头上的操作均不可用
-
鼠标 hover 单列标题时，右侧出现操作项
-
排序
-
若当前列支持排序，鼠标 hover 列标题出现「排序 icon」
-
点击列标题或「排序 icon」即生效
-
可反复点击在正排、倒排、默认排序中切换
-
生效的时候，「排序 icon」须展示在列标题右侧且高亮
-
-
筛选
-
若当前列支持筛选，鼠标 hover 列标题出现「筛选 icon」
-
点击「筛选 icon」唤起进一步操作
-
生效的时候，「筛选 icon」须展示在列标题右侧且高亮
-
当筛选规则失效的时候，「筛选 icon」消失，并回到默认状态
-
-
更多操作
-
若当前列有更多操作，鼠标 hover 列标题出现「...」
-
点击「... 」唤起进一步操作
-
03. 拖拽列宽度
-
鼠标 hover 列标题栏时，右侧出现分隔线
-
鼠标可直接拖拽分隔线
-
单列可根据业务需要设定最小/大宽度
04. 单行操作
-
单行操作可根据业务需要选择默认出现 / 鼠标 hover 后出现
-
当操作列有标题或当列表滚动时吸住的时候，则必须默认出现
05. 展开/收起
-
当列收起时，点击箭头展开下一级
-
当列展开时，点击箭头收起所有下一级
06. 容器相关
- **三大状态：**单列有 Normal、Hover、Selected 3 种状态
-
加载
-
全列表加载：表头及内容均需要重新加载
-
仅内容区加载
-
-
空列表
-
仅内容区为空
-
整个表格区域为空
-
样式
布局
-
可在独立页面、弹窗、滑块面板（SlidePanel）中使用
-
表格标题的对齐应与内容对齐
-
内容行：文字和图标首选左对齐，若数字内容中不会出现小数点则首选右对齐。有小数点则小数点对 齐