跳到主要内容

表格列表页

列表页可以查看和处理大量的条目,常有导航至详情的作用。用户可在列表页对条目进行筛选、对比、新增、分析、跳转至详情页等操作。


不同类型

常规的数据查询表格,可设计在表格上面是否保留搜索筛选区域卡片,分页器固定在底部。

有筛选

无筛选

表格功能

固定列

页面结构

页面标题栏

页面标题样式

表格工具栏

表格工具栏

有无按钮

有按钮

一个页面只允许出现一个主按钮,其余操作均使⽤次级按钮,按钮顺序按重要程度从左到右排列。

无按钮

导入导出

可根据业务需求选择是否启用。

筛选器

表格工具栏-筛选器

表格工具栏右侧区域内的筛选器具有折叠功能,可以折叠展开筛选器内组件。如果对于页面纵向空间有较强需求,且过滤功能优先级较低,可以默认将筛选器整体收起。 在设计筛选器时,应根据实际的业务场景选择过滤字段和组件类型,常用的组件类型有如下几种:

  • 输入框:适用于字符串类型的筛选对象,通过输入关键字实施模糊匹配。
  • 选择框:适用于枚举类的筛选对象,请在绝大部分选择框上启用多项选择功能,以实现灵活的筛选需求。
  • 组合选择框:适用于可选项数量较大的关联对象字段。
  • 日期选择框:可根据实际情况选择日期选择框或日期段选择框。

视图切换

信息

概念设计,目前还未应用。

某些场景下列表视图需要多种查看维度(如文件管理,需要列表和缩略图模式),表格工具栏可承载视图切换功能操作。

最大化

信息

概念设计,目前还未应用。

  • 用户可点击表格工具栏最右侧的“最大化”按钮,可进入表格的全屏视图。在此视图下,用户可以专心在表格中处理事务不受其他信息的干扰。
  • 标准筛选器自动隐藏,用户可以通过点击表格工具栏中的筛选器按钮来打开筛选器对话框。筛选结果会展示在表格工具栏与表格之间。
  • 表格工具栏、表头、表格底栏锁定,分页器自动切换至单页展示 50 条数据。

表格内容区

表格区承载表格,表格有两种不同的布局方式:自适应表格和固定列表格。

自适应表格

自适应表格仅呈现比较关键的信息,用户可通过搜索、高级筛选功能,快速查找相关项目、处理数据。在这种布局下,表格不会出现横向滚动条,所有内容列等比自适应( 操作列为固定列)。

固定列表格

固定列款表格适用于内容复杂、信息量庞大的场景。用户希望可以从表格中获取关键信息、执行操作,而不必频繁跳转至对象详情页面。这种布局下,通过横向滚动条解决内容溢出的问题。

表格翻页区

表格翻页区主要用来承载分页器。对于大多数表格来说,对象数量总是会随着业务的进行而不断增加,为避免数据量的增加而影响性能,应在设计之初就决定是否启用表格翻页区,使用分页器功能。

交互规则

页面操作

  • 单项或批量操作应根据所选对象数量来改变可用、禁用状态。
  • 对象的单项操作,如编辑,在未选择任何对象时应禁用。
  • 对象的批量操作,如删除,在未选择任何对象时应禁用。
  • 对于无需特定对象的操作,如新增,应始终保持可用状态。

表格行操作

通常情况下,针对行项目的操作应放置在表格的操作列,操作列列宽固定不受表格宽度和横向滚动条影响,总是处于表格最右侧并总是可见。

  • 对于不可用的操作,不要使用按钮的不可用状态,请直接隐藏。
  • 请将主要的操作放置在最左侧,溢出的操作按钮将自动收起到折叠按钮中。

设计适配

何时使用

  • 当有大量结构化的数据需要展现时。
  • 当需要对数据进行排序、搜索、分页、自定义操作等复杂行为时。