跳至主要内容

Table 表格

对表格里的单元、表头等通用交互模式的定义和说明。


信息单元

表格的信息单元是为了承载不同信息类型,比如文字、操作等。

文本类

示例名称说明
单文本--
时间对时间格式化,dd/mm/yy hh:mm
价格对价格格式化,每3位数加,分隔。
卡号对卡号格式化,每4位数加-分隔。

功能类

示例名称说明
用户--
用户列表--
附件--
图片--
支付--

状态类

示例名称说明
标签--
开关--

输入类

示例名称说明
文本输入--
下拉选择--

进度类

示例名称说明
提示型--

操作类

示例名称说明
文字按钮--
图标按钮--
确认取消--

营销类

示例名称说明
满意度--

特殊类

示例名称说明
多行溢出--
单行溢出--

表格表头

示例名称说明交互
多选框一般用于表格列的最前面。点击勾选表示选择此列数据。
文本最通用,用于大多数的场景。当超过最大宽度时,用 ... 截断溢出文本。
数据筛选一般用于类型、品牌、状态的筛选。点击图标,出现下拉菜单列表,进行筛选数据。
数据排序一般用于序号、时间、价格、开关的排序。点击图标,进行正序和倒序的排序。
数据描述一般是用一个图标,用于对当前表头的解释。鼠标悬停出现 tooltip,显示对当前数据列的解释。
数据筛选

当有选中数据的时候,图标颜色变为主题色。

数据排序

鼠标悬停图标时,显示tooltip

数据解释

鼠标悬停图标时,显示tooltip

表格操作

示例名称说明
一个操作当操作等于 1 个时,显示:主操作
两个操作当操作等于 2 个时,显示:主操作+次操作
三个操作当操作等于 3 个时,显示:主操作+次操作+次操作

数据规则

  • 默认每页展示 10 条数据。

设计指南

  • 导入的单元格数据如果是可编辑的,导入时默认展示单元格的编辑状态,提高用户的编辑效率。
  • 单元格列数过多时,应提供横向的滚动条进行表格更多信息的查看。
  • 单元格列的宽度,应尽可能的预估和考虑单元格信息的长短,另外单元格列的宽度应遵循网格系统的比例(如:128px、160px、192px...等)。

概念方向

可输入或者操作的单元格,可通过鼠标悬停或点击,直接可以进行编辑操作,无须先点击编辑按钮。