跳到主要内容

表格列表页

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


单列表表格

常规的数据查询表格,按钮区域和搜索筛选区域在表格上方,分页器固定在底部。

何时使用

  • 用户需要在大量对象中,通过搜索、筛选、排序查找目标对象。
  • 用户需要对不同对象,执行单独或批量操作。
  • 用户需要快速获取对象的关键信息,并能进行轻量、直观的比较。

多列表表格

多列表视图可通过分组方式分类展示用户所需的信息集合,提供不同分组下不同的数据检索功能,分组下展示字段也可不同。

何时使用

  • 用户需要直观地分类查看信息集合时。
  • 用户多列表下的字段、筛选条件不同时。

高级列表表格

支持更多的高级自定义功能,比如自定义显示表格列、表格列排序。

按钮区域和搜索筛选区域在表格上方。

分页器固定在底部。

Demo 预览

提示

默认情况下,列表页的表格请优先使用这个高级表格列表。

拖放排序

自定义宽度

表格支持功能

固定列

滚动条

页面结构

页面标题栏

页面标题样式

表格工具栏

表格工具栏

有无按钮

有按钮

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

无按钮

视图切换

注意:目前线上还未实现。

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

导入导出

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

筛选器

表格工具栏-筛选器

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

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

最大化

注意:目前线上还未实现。

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

表格内容区

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

自适应表格

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

固定列表格

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

表格翻页区

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

交互规则

页面操作

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

表格行操作

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

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

设计适配

何时使用

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