构成元素
我们为表格分了三个主要区域:
- 顶部区 ( 含标题内容区/表格内工具栏)
- 内容区 ( 单元格展示区域 / 行操作区域 )
- 底部区 ( 单元格被选择操作区/ 页码区域 )
顶部区
- 标题内容区: 表格的标题, 标签展示区域
- 按钮工具区: 表格固定操作区, 依次为: 添加、导入、下载、打印、自定义表格列展示
内容区
- 表头: 用于表头的数据展示
- 表格内容区: 用于内容区的数据展示
底部区
- 翻页器: 可跳转到点击页面
- 页码框: 可跳转到指定输入页码页
- 合计数据页: 展示整个表格总共的页面数量
元素类型
- 文本: 默认一行, 支持自定义换行功能
- 文本+图标:
- 复选行: 支持多选行操作
- 单选行: 单独选择某一行
- 标签: 支持多个标签, 不同种类标签出现时, 同分类换行
- 按钮: 当按钮数量超过3个时候, 会自动收起
- 输入框: 支持文本输入
- 开关:
- 数据图例: 涨跌百分比
- 数据图例: 进度百分比
- 数据图例: 环形百分比
- 图片: 支持单个、多个图片展示
尺寸
表头
- 表头默认高度: 32px、布局: Auto
- 表头最小宽度依照内容长度定
- 最大宽度可自定义宽度, 不限宽度
内容区
- 单行文本内容区默认高度: 24px
- 双行文本高度: 48px
- 三行文本高度: 64px
用法
什么时候使用
- 当有大量结构化的数据需要展现时
- 当需要对数据进行排序、搜索、分页、自定义操作等复杂行为时
什么时候不使用
- 当有只有少数数据需要展示时, 例如列头只有2-3列
最佳实践
默认表格
常规表格样式
用于展示/对比不同数据维度的信息
数据图例表格
内容区带有数据图例
需要使用图表来快速对比多种信息时
左右吸附
固定指定列
列头左侧可通过自定义表格列，钉在表格内，右侧操作区默认固定钉住，当你需要着重查看或者对比某列数据时
选中单行
选中表格中的某一行 (行内合并无此功能)
当你需要选中某行数据进行其他操作时, 例如: 导出此条数据
选中多行
选中表格中的多行操作
当你需要选中多行数据进行其他操作时, 可多选于反选
自定义列
可自定义表格列是否显示、是否钉在左侧、列头排序功能
当表格列头过多时候(大于8个), 可使用自定义列展示功能, 该功能涵盖钉住、显示/隐藏、排序功能
下钻 (树形结构)
在当前表格内下钻主信息的子信息, 最多支持3层下钻
当表格内需要表达父子级关系时, 建议最多使用不超过3层
行列合并
表头区与表内容区可自定义合并功能, 规则支持左右、上下合并
当内容区列需要合并统一查看时
