相关标注与解析见CoDesign：https://codesign.qq.com/workspace/board/GPEpZGAXWm9w3z7

常用于展示同类结构下的多种数据，易于组织、对比和分析等，并可对数据进行搜索、筛选、排序等操作。

基础表格

结构拆解

可分为三个部分：

间距标注：

顶部
左侧为「全局操作」+「批量操作」：

• 从控制范围的角度来看，影响整个表格的操作为全局操作，如新建；仅对所选行产生影响的操作为批量操作，如批量删除、批量修改、关机、开机；
• 「新建」按钮固定搭配「+」图标使用，其余暂不规定；
• 排列顺序为全局操作在左，批量操作在右；
• 既又全局操作又有批量操作时，全局操作为主要按钮，其余为普通按钮；
• 仅有批量操作时，可将某一操作定义为主要按钮其余为普通按钮，也可全部定义为普通按钮；
• 原则上只有一个主要按钮，用于引导用户操作；

按钮数量一般来讲「3个操作按钮+1个更多」能满足多少场景，个别场景按钮比较多，在右侧空间允许的情况下，根据「7±2」法则，按钮数量最多可增加至「6个操作+1个更多」；

右侧为「搜索」+「重置」+「导出为Excel」+「表格展示列设置」

用户输入关键字后点击放大镜图标触发查询的请求，有助于缓解服务器压力，搜索分模糊搜索和精准搜索：

• 模糊搜索优点在于减少用户记忆负担，缺点是容易把不相关的信息也搜出来，精准搜索优点是搜索精度高，缺点是每次只能对单一条件进行搜索，增加用户记忆负担；
• 具体使用哪种根据实际情况而定；

中部
为表格主体：

• 首列始终在第一列，通过点击对应的文本进入详情；
• 操作列始终在最后一列，操作列无「详情」操作，某些情况下可能没有操作列；
• 单元格高度 = 内容高度+上下边距，默认上下左右边距为12px，则一行文字的情况下单元格高度为44px；对于弹窗对话框内的表格，上下左右边距改为8px；
• 单元格宽度处理办法有固定列宽、自适应列宽、手动拖动，我们综合采用这三种方法：
  a. 列宽度允许用户自由拖动调整列宽；
  b. 当列字段是「状态」「时间」等固定格式时，采用固定列宽的方法，其余列按百分比或等分自适应；
  c. 当字段值为非固定格式，无法确定内容长度时，需根据业务定义好内容的最大宽度与行数；
  d. 当内容过长超过列宽及行数时，以“…”显示，鼠标悬停时出现气泡，显示完整内容；
• 单元格不能出现空白的情况，空白单元格的处理方法：
  a. 数据为零时，用“0”表示，且小数点后位数要与所在列的数据格式保持一致；
  b. 没有数据时，用“-”表示；
• 行内操作默认为2个操作项+1个更多，可根据业务特殊场景做调整：
  a. 操作项≤3项时，全部展示，无更多；
  b. 操作项＞3项时，展示最重要2项操作，剩余的操作放到更多里面；

底部
左侧为「已选：X项」，没有多选时不显示，右侧始终为分页；

交互细节

操作项

操作项较多并且存在关联关系时，建议归类分组：

图标按钮

鼠标移入时出现Tooltip提示，告诉用户当前图标按钮的操作含义：

点击重置后，清空搜索，表格回到初始状态。

点击导出后，将生成一份包含整个表格数据的Excel文件，并在顶部出现全局提示告知用户导出成功：

表格展示列设置可控制每一列的显示或隐藏，但首列与操作列不可隐藏：

表头

表头名称简单清晰，精简字段名称，遵循“少一个字不可”原则，字段名称过长又必须展示才能理解其意思时，用专有名词代替，给一个提示图标，鼠标悬停时出现 Tooltip ：

表头支持排序分升序和降序，一般情况下，默认按创建的顺序由新到旧排序，即最新创建的排在最上面，鼠标移入的交互状态如下：

表头筛选支持提供更快捷的单次筛选，通过「漏斗」图标触发，具体哪一列需要表头筛选需要结合业务做出判断，支持筛选的列用需要做出标识，并反馈当前筛选的状态：

有的表头会同时支持排序和筛选，并且有提示图标，此时交互状态如下：

单元格

1、高度、宽带定义：
采用前端盒子模型的思想，便于设计更加落地。单元格高度是个变量，受其内容高度的影响：单元格高度 = 内容高度 + 上边距 + 下边距

单元格宽度影响列宽，处理方法有三种：固定列宽、自适应列宽、手动拖动。在实际设计方案中，一般综合采用这三种方法：

• 列宽度允许用户自由拖动调整列宽；
• 当列字段是「状态」「时间」等固定格式时，采用固定列宽的方法，其余列按百分比或等分自适应；
• 当字段值为非固定格式，无法确定内容长度时，需根据业务定义好内容的最大宽度与行数；
• 当内容过长超过列宽及行数时，以“…”显示，鼠标悬停时出现气泡，显示完整内容；

单元格定义2种规格，对应着表格的两种类型：默认型表格与紧凑型表格

2、单元格内容：
单元格内容一般为文字、图标等，也可以为其他想要格外突显的内容，这些内容称为关键数据标识，用于帮助用户快速定位目标信息，如进度条、状态等等。

用于表格状态标签Tag，根据状态所代表的含义，使用不同的状态标签：

• 代表成功：绿色green；
• 代表进行中，正常状态：极客蓝geekblue；
• 代表错误、失败：红色red；
• 代表警示、提示：默认金色 gold（当有两个状态都代表警示时，更严重的警示用日暮volcano，次警示用金色gold ）；

3、空白单元格处理：
单元格空白会给用户造成到底是“没有数据”还是“数值为零”的困惑或误解，所以对于无数据或者为零的情况，正确的做法是：

• 数据为零时，用“0”表示，且小数点后位数要与所在列的数据格式保持一致；
• 没有数据时，用“-”表示；

4、度量单位：
单元格是数字时，数据的度量单位使用规则：

• 单位统一时，在表头标识，如“容量(GB)”，单位用英文状态下的括号包围；
• 单位不能统一时，不在表头标识，如“240GB”、“1.24TB”；

行

可选择的表格，行选中的方式除了点击复选框选中整行，还需支持点击行内任意位置选中整行：

行的交互有三种状态，分别是正常态Normal、已选择Selected、鼠标移入Hover：

列数增多导致表格宽度大于页面可展示宽度时，需要对首列和尾列操作进行固定，通过拖动横向滚动条或者按住 Shift 滚动鼠标，横向滚动查看其它列的数据：

当内容过长超过列宽及行数时，以“…”显示，鼠标悬停时出现气泡，显示完整内容：

单元格支持点击「复制」图标复制单元格的内容，必要时使用：

多行内容时，默认采用垂直居中对齐

列

鼠标移入表头分割线处，可拖拽调整列宽的大小，以显示因字段过长而被隐藏的内容：

分页

每页的默认行数为10条/页，同时分页选项有多个选择：

大量数据

展示大量数据及数据列时，需要对表头进行吸顶、分页吸底、首列尾列固定：

加载状态

加载状态的表格：

增强表格

在基础表格的基础上增加一些更复杂的功能，如高级搜索、平铺筛选、树形、树形选择、表头分组等。

高级搜索

基础搜索功能不能满足需求时，通过「高级搜索」展开更多过滤条件，条件高度可配置，且通过账号记录设置结果，通过设置筛选项，每个角色都可以根据自己的需求和习惯决定展示哪些选项：

平铺筛选

需要先对数据进行筛选再查看的场景，或者用户希望直接看到选项内容时，使用平铺式筛选，优点是选项内容直观，筛选效率高，缺点是占用页面空间，因此不建议筛选项超过 7 项：

可展开

详情支持展开，适用于详情信息较少、无复杂操作与交互的场景：

树形选择

当表格数据为包含与被包含的关系时，可采取树形表格：

表头分组

多条数据同属于一个维度，在表格里面表现为一个表头底下有多个分组做区分，常用于报表界面：

查看详情

详情的查看入口统一由点击名称进入，操作列无“详情”操作

详情根据信息量、与母页面的连贯性展示形式有以下4种：