Table 表格

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

    适用:用于大量数据展示或需要横纵对比的场景。

    不适用:非结构化数据的展示或无横纵对比诉求的场景,此时可用列表。

    通用原则

    • 表格中允许展示静态数据或操作;允许单列折叠展开;允许批量操作

    • 具有高度自定义的特性,设计师按场景所需灵活组合

    • 表格中信息重要层级从左到右依次递减

    • 左侧第一栏通常为标题,操作栏放于最右侧;标题栏和操作栏可固定,只滚动内容区

    • 表头的标题保证简洁可读,不可折行,尽量避免「...」

    • 表头可在批量操作时变为操作栏

    构成

    表头

    当有滚动条的时候,表头可吸顶。

    1. 批量勾选(可选)

      1. 默认一直出现,用户随时勾选后进入批量操作状态
    2. 列标题+单列操作

      1. 列标题:不允许折行,超过可「...」;建议不超过 6 个汉字

      2. 单列操作

        1. 默认不出现,仅在鼠标 hover 单列标题栏出现

        2. 当前列表生效的规则须默认展示(比如倒序),方便用户快速了解当且列表的数据规则

        3. 操作数默认不超过 2 个,更多的须收起到「···」中

    3. 批量操作

      1. 默认不出现,仅在进入批量操作状态时出现

      2. 需展示当前已选列数量(紧跟在全选 Checkbox右边)

    内容区

    允许上下左右滚动。

    1. 序列 / 多选(可选)

      1. 默认不出现或为序列号,鼠标 hover 时多选框才出现,点击后进入批量操作状态

      2. 全选时,自动出现并勾选

    2. 展开/收起(有树形结构的时候使用)

    3. 单行操作

      1. 操作按钮建议不超过 2 个,超过须收起到「···」中,或使用 下拉按钮

      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)中使用

    • 表格标题的对齐应与内容对齐

    • 内容行:文字和图标首选左对齐,若数字内容中不会出现小数点则首选右对齐。有小数点则小数点对 齐