表格
组件描述
表格由单元格构成的行和列所组成，是一种组织整理结构化数据的手段。
使用场景
当需要有逻辑的表达和组织一组有关联的数据集合时使用。
基础元素
当您考虑应用表格展示数据时，请考虑至少展示以下基础元素。
-
表头
表头一般指表格的第一行，指明表格每一列的内容和意义。 -
行列项
用于显示有关联的数字或其他文本项，以便快速查看与引用分析。表现形式为一行和一列。 -
数据总览
为了让用户更方便的查看当前表格的数据量，每个表格都需要展示数据汇总的概览数量。如：共xx个数据。除数字外的文本可自行定义。但务必清晰准确，与当前的表格内容存在关联性。 -
分页器
不论表格行数量的多少，都应该展示分页器为用户提供导航。空数据表格除外。
表格状态
当您考虑应用表格展示数据时，建议包涵以下表格状态。
-
默认状态
表格默认状态也就是原始的数据展示状态。 -
悬停状态
在表格内任一行启用鼠标悬停的状态。
表格样式
基础表格
这是最基础的表格样式，您可以在当前基础上添加表格其他样式。
可选择的表格项
- 多项选择
- 可以对表格中的数据进行多项选择。
- 多项选择可提供全部选中的批量入口，以便用户快速选择当页全部的数据或表格内全部的数据，并且需要展示当前选中内容的数量值。
- 如存在全部选中的操作入口，需要展示对当前全部选中的内容所进行的后续操作。
- 单项选择
可以对表格中的数据进行单项选择。
带有不同状态的单元格或表格项
- 单元格或表格行可以让用户更快捷的知道当前值的状态。
- 状态包含：积极、消极与禁用。
可手动展开的表格项
一个表格项可以被折叠起来，被折叠的空间可以展示该项的更多信息。
带有斑马线的表格
一个表格项可以用较深的颜色将不同的内容分隔，以增加对比度和可识别性。
可手动编辑的表格项
可以对当前展示的表格项进行内联的编辑操作。
可排序的表格
表格允许用户通过单击表格标题来为内容排序。
可滚动的表格
-
竖向滚动
- 对于行数很多，并且需要在当前页面展示更多的数据量时，请配合使用竖向滚动条。
- 滚动时表头需要固定，以便用户更清晰的知道当前一列的数据所属标题。
- 触发鼠标滚动的区域为表格内区域，当鼠标移出表格内区域时滚动无法触发滚动。
- 当鼠标移入可滚动区域时自动显示滚动条。
- 当鼠标移出可滚动区域时，滚动条自动消失。
-
横向滚动
- 对于一行内容较多并且一行内需要展示的数据类型非常多且无法割舍时，可考虑配合使用横向滚动条。
- 并不建议在表格中使用横向滚动条，因为横向滚动条的出现会打断用户查看数据时主观建立的关联性，但不否认当用户明确地需要对一行数据或多行数据进行对比时使用。建议如遇到此种情况使用其他方式解决，如无法解决时亦可使用。
- 横向滚动条一直存在且不会自动消失。
带有图片的表格项
一个表格项的数据类型可以包含一张图片。