表格 Table

以行、列的网格状格式显示数据信息。

使用场景

• 展示行列数据，用于有大量结构化的数据需要展现时，常用于后台数据展示。
• 支持对数据进行排序、搜索、分页、自定义操作等复杂行为。

结构

区域标识

组件标识

注：现在采用的统一放在列表头部的下拉筛选和搜索不放在该组件处进行讨论

配置项

类型

基础

基础的表格样式，最后一列是各种操作：操作按钮超过3个就收起。若字段无法展示全，则显示省略号，移入后显示全部内容的文字提示气泡。

固定列

方便一页内展示大量数据项：可固定头部和尾部的列，或分别只固定头部或只固定尾部。

固定行

方便一页内展示大量数据行：可固定标题行和尾部的行，或分别只固定标题行或只固定尾部行。固定标题行的情形比较常见，主要用于列较多时，用于持续展现数据所属的列。固定尾部行的情形主要用于尾部行为特殊行的情形，比如尾部行为合计数据的情形。

多级表头

数据结构比较复杂的时候，可使用多级表头来展现数据的层次关系。

行拆分

当一个行数据中，包含多个不同类别的数据时，可以采用行拆分的形式。如果这些类别的数据有相关关系，一般会位于相邻行。

选择与操作

选择后出现批量操作按钮，完成后清空选择。有两种形式：1、批量操作区出现在列表头部；2、批量操作区出现在列表底部，吸底。

筛选与排序

筛选：对某一列数据进行筛选，点击后出现筛选框，支持单选、多选。多选时操作后点击“确定”或其他区域后生效。“重置”即恢复到未筛选状态。

（注：后台表格数据展示页通常采用上方统一的筛选区来筛选数据，较标题行内的筛选器，筛选区用于列数较多的表格时较为便利，且能够支持用统一的「查询」按钮来执行查询操作，减少页面的刷新次数。

而标题行内的筛选器比较少用，常用于展示详情页中数据明细的简单表格。）

排序：对某一列数据进行排序，正序或倒序。

文字提示

若列标题有提示，有下划线标识，移入后显示提示浮层。

自定义列

支持部分列的自定义展示，支持列的展示顺序调整。

1、用于列较少时，支持部分列的自定义展示和顺序调整。

2、用于列较多时，支持部分列的自定义展示。

可编辑表格

支持表格全部或部分数据的编辑，根据编辑的区域可以分为以下3种。

1、单个数据的编辑：可根据此数据编辑的重要程度和使用频率来决定编辑操作是直接显示，还是移入相应单元格之后再显示。

2、单行数据的编辑：对于列比较少的简单表格，在进行数据编辑时，可采用单行数据的编辑。

3、对整个表格的编辑，一般用于表单录入中二维表结构数据的录入，比如财务报表数据。

系统用法

系统用法可以分为：简单表格、复杂表格。

简单表格

支持结构化数据展示，通常用于详情页中数据明细的展示。

复杂表格

常用于后台表格数据展示页，一般支持列表的选择和批量操作、单列内容的排序和筛选、列的自定义展示和顺序调整等。