Skip to content

表格

概述

用于数据收集展示、分析整理、操作处理,组件构成:

  • 表头 (必有):说明这一列的信息类别,也可以在表头放置一些排序、筛选等操作按钮。
  • 单元格(必有) :表格的主体由多个单元格组成,单元格内支持文字、图标、按钮、标签、单选框、复选框等元素。
  • 行列分割线(非必有):从视觉上分隔信息。

使用建议

何时使用

  • 需要展示数据时:当有大量结构化数据需要展示展示时可以使用表格对数据进行有序的展示,更有利于用户对于数据的获取
  • 需要对数据进行复杂操作时:当需要对数据进行排序、搜索、筛选等操作时,可以使用表格组件,利于对数据进行操作。
  • 需要对数据进行对比,归纳与分类时:当需要对数据进行对比、归纳、分类等操作时,可以使用表格组件,使信息之间易于对比,便于用户快速查询其中的差异与变化、关联和区别。

何时不使用

  • 单独的选择项和对应选项时: 单独的选择项对应选项时可采用列表组件,而非表格组件。

表头

纯文本表头:仅起到解释数据属性的作用

多功能表头:含筛选、搜索或排序等相关操作

分组表头:信息分类层级较多的情况下使用,表格需要采取带竖向分割线

布局

横向布局规则:列内容自适应宽度然后根据表格宽度均分布局

尺寸

列表总共定义三个尺寸规格,小型列表只用于对话框内

交互

固定行:适合列表滚动加载时,适合浏览场景

固定列:适合列表项较多时 ,需要左右滑动时。比较常见的是首尾固定,当时也可以按照业务要求首列或者尾列固定,或者说表格前两列业务都需要看到,则可以固定前2列

单/多选表格:适合列表滚动加载时,适合浏览场景

可编辑单元格/行:如表格内信息可编辑,则点击出现可编辑态,再点击激活编辑输入。点击操作区“编辑”操作可对整行进行编辑操作

折叠展开:直接在表格里展开(可以是详情,也可以是二级表格),无需打开新页面即可查看附加信息,防止用户迷失

扩展样式

基于基础样式可以根据具体场景需要扩展样式