表格Table

表格定义及基础规则

定义

表格通常用于展示大量结构化的数据，便于用户对这些数据进一步的查看或操作。一个构造清晰的表格布局，将大大提升读者对信息的接收速度和理解程度。

基础规则

1. 基本构成：由若干行列组成矩阵排布，至少需要包含表头、表身两部分。表头样式需区别于表身。
2. 分隔线：通常情况下，行分隔线必须存在，列分隔线部分场景需出现，例如：调整列宽以及需明确区分单元格hightlight场景。(信息密集的情况下，建议增加斑马线?斑马线慎重选择)
3. 对齐方式：普通单元格与表头默认左对齐。金额类单元格及百分比与表头默认右对齐。所有单元格内容垂直居上。
4. 折行限制：不允许折行的单元格包括：表头、ID、姓名、账号、卡号、金额、日期、电话、邮箱…
5. 特殊标识：单元格内文字如遇链接，则使用链接色；如遇警示，则使用警示色；如需要标签，则放置于该单元格内部左侧，整列文字连表头一起缩进，以保持视觉上的整洁。
6. 记录操作展示：单选、复选操作位于每行行首，全选位于表头行首，单行操作位于每行行尾，默认全部展示，无需隐藏。当单行操作数量大于3个时，收起在更多下拉面板中。该下拉面板菜单文字保持与“更多”文字右对齐。
7. 表头操作区：记录排序，记录筛选，入口均位于表头字段名称右侧。

表格类型

A.树形表格

定义

数据结构相同并共用表头，单列出现树形层级结构

1. 可展开树形结构，左侧带可展开提示icon（图示为加减号icon）。
2. 点击可展开icon，展开分组明细数据记录，同时被点击的可展开icon（图示为加号）变为已展开icon（图示为减号并为选中态）。
3. 展开后明细数据第一列向右缩进，体现从属关系。

*树形table中不允许出现斑马线样式

B.子母表格

定义

主子表结构，数据结构不同，不共用表头

1. 汇总数据两种情况：一是全部数据汇总在表头上方展示；二是当页汇总数据在最后一行下方展示，与某一列有对应关系，并区分行背景样式。
2. 主表记录与子表记录分别采用不同的背景色以示区分
3. 子表数据整体缩进，体现从属关系。
4. 可展开子表，点击可展开icon，展开子表数据记录，同时被点击的可展开icon（图示为加号）变为已展开icon（图示为减号并为选中态）。-同分组table交互逻辑。

*子母表中不允许出现斑马线样式

C.分组表格

定义

数据结构相同并共用表头，存在总分关系

D.可编辑表格

定义

表格的编辑状态，切换即可编辑表格内容

• 单元格激活时，展示激活样式。包括纯录入、纯选择和可录可选的不同元件。
• 对于需要弹窗回填的单元格，分两种情况。如果表格是阅读型的，则单元格内容右侧提供编辑图标，点击后弹详情编辑弹窗；如果表格是填写型的，则激活单元格时就立即弹窗。

表格内部组件规则

基础构成

A.基础样式

1. 由若干行列组成矩阵排布，至少需要包含表头、表身两部分。表头样式需区别于表身。
2. 分隔线：通常情况下，行分隔线必须存在，列分隔线部分场景需出现，如财税大脑交叉表需明确区分单元格场景。(信息密集的情况下，建议增加斑马线，斑马线慎重选择)
3. 对齐方式：普通单元格与表头默认左对齐。金额类单元格及百分比与表头默认右对齐。
4. 特殊标识：单元格内文字如遇链接，则使用链接色；如遇警示，则使用警示色。
5. 操作区：单行操作位于每行行尾，默认全部展示，无需隐藏。当单行操作数量大于3个时，收起在更多下拉面板中，hover更多展示下拉内容，该下拉面板菜单文字保持与“更多”文字右对齐。
6. 分页器通常在表格下方右对齐，翻页后回到表格顶部, 表格中的数据不能填满一页时，不显示分页器

*每个单元格左右留有不小于12px Padding的安全距离，第一列左侧留有12px Padding。

B.Checkbox 选择

1. 单选、复选操作位于每行行首，全选位于表头行首，可进行全选所有及全选本页操作。点击全选checkbox则触发全选所有和全选本页操作，必须选择其中一项才可以进行全选操作。

C.Check box+树形结构

内部扩展

A.列宽规则

1. 折行限制：不允许折行的单元格包括：表头、ID、姓名、账号、卡号、金额、日期、电话、邮箱…
2. 固定列宽给到默认宽度值：如银行卡号、电话、日期、OU… 也可针对具体业务场景给到具体内容列宽，若不指定列宽则根据默认规则实施。
3. 前端采用浏览器自带规则根据第一行内容宽度给到整个列宽度。
4. 可针对业务场景选择最多展示一行或两行，多于两行“…”展示。
5. 折行后内容居中展示。

B.过宽与过高：

1. 当列数过多导致表格超出页面最大宽度时，允许出现横向滚动条。

2. 可以锁定首列（在屏显100%宽度下，滚动条居最左侧时，表格总共可显示n列，则左起第1列连续至第

   （n-1）列可被锁定）和尾列（通常为操作列），锁定时，滚动条只出现在活动区域内。

3. 可以锁定表头,对于表格内容一屏展示不完全的情况，出现锁定表头并出现竖向滚动条。但页码依旧需要存在。

4. 被锁定列的最右侧，需出现区隔提示，以让用户明显感知到此行/此列已被锁定，该样式可以于滚动过程中出现。
5. 横向竖向滚动条不能同时出现。

• 锁列情况

• 锁表头情况

表格交互情况列举

A.可选择表格

定义

第一列出现勾选☑️操作区，用户随时勾选后进入单选操作或批量操作状态，可全选本页及全选所有，再次点击则取消全选。已选中条数以tooltips形式展示在全选操作上方。

B.表格头部操作-调整列宽

1. 当表格允许调整列宽时，鼠标悬停在表头列分隔线附近时（左右5px），出现可拖拽提示（列分隔线+可拖拽示意），同时光标变为改变列宽的拖拽光标。
2. 拖动浮现的列分隔线，列宽实时改变。
3. 松开鼠标，则完成调整列宽，可调整提示一律消失。

C.表格头部操作-排序及筛选

一.排序

1. 鼠标悬停至排序图标上，图标高亮，同时浮出下拉面板。面板默认与该表头单元格左对齐。
2. 选择其中某个维度某个方向的排序选项，则表头文字变化为该选项名称，同时表格整体按新排序刷新。
3. 已被选中某项排序时，再次呼出面板，则对应选项有被选中标识。
4. 当排序维度只有一维时，则排序功能可做简化，即排序图标作为开关按钮使用，不再需要浮出面板。单击一次按该表头所指维度降序排列，再单击一次切换为升序排列，以此类推。

二.筛选

1. 鼠标悬停至筛选图标上，浮出下拉面板。面板默认与排序图标右对齐。
2. 选择其中某个筛选项时，则表头文字变化为该选项名称，同时表格整体按筛选结果刷新。
3. 已被选中某筛选项时，再次呼出面板，则对应选项有被选中标识。

D.行拖拽

1. 当表格允许调整行位置时，鼠标hover至可调整行位置的行记录上时，该行行首出现可拖拽提示icon。
2. 按住可拖拽icon进行拖拽时，被拖拽的整行方块在页面浮出，目标位置实时响应，出现虚框提示可占用面积。
3. 松开鼠标，则完成行位置调整，可调整提示一律消失。

表格按钮区规范

1. 表格全局通用功能按钮区最多展示4个功能项，如超过4个则收起设置入口。
2. 表格通用功能包括：密度调整、斑马线模式切换、表格全屏模式、自定义列。功能业务可选择是否需要。

A.密度调整

1. 紧凑模式和松散模式：下拉选择紧凑模式或松散模式。
2. 此项业务可选择是否必要，也可选择默认为紧凑模式或默认为松散模式。

• 松散模式：

• 紧凑模式：

• 更紧凑模式：（财税大脑场景*大部分场景不适用）

B.斑马线模式（子母表、树形结构表、分组表格不允许出现斑马线模式）

1. 斑马线下拉选择是否需要展示斑马线
2. 此项业务可选择是否需要，也可选择默认为斑马线模式或非斑马线模式。

*子母表、树形结构表、分组表格不允许出现斑马线模式

C.全屏模式

1. 点击全屏icon进入全屏状态
2. 此项业务可选择是否需要

D.自定义列

1. 点击“自定义列 icon”，展开面板，与自定义列按钮右对齐。
2. 数据列缩进为副表头形式，而非子母表，子母表结构完全不一致。
3. 勾选或者取消勾选，都会直接导致页面上的列显示/隐藏实时效果。
4. 浮层面板允许纵向滚动条。
5. 操作列及基本信息不可定义隐藏的，在下拉框中不展示
6. 可拖拽进行排序。

表格页面扩展规则

具体内容见列表页

表格模块加载与缺省

A.模块加载

B.模块缺省

有插图情况：

无插图场景：

*推荐在表单混排或其他轻量的场景下使用

表格列内容列举

A.列情况列举

列情况列举：（开关、标签tag、icon、进度条、可视化图表、状态标识…)

B.列固定值

如金额、日期、手机号码、银行卡号等可枚举固定值，便于保证表格展示样式。