表格列表页
列表页可以查看和处理大量的条目,常有导航至详情的作用。用户可在列表页对条目进行筛选、对比、新增、分析、跳转至详情页等操作。
单列表表格
常规的数据查询表格,按钮区域和搜索筛选区域在表格上方,分页器固定在底部。
何时使用
- 用户需要在大量对象中,通过搜索、筛选、排序查找目标对象。
- 用户需要对不同对象,执行单独或批量操作。
- 用户需要快速获取对象的关键信息,并能进行轻量、直观的比较。
多列表表格
多列表视图可通过分组方式分类展示用户所需的信息集合,提供不同分组下不同的数据检索功能,分组下展示字段也可不同。
何时使用
- 用户需要直观地分类查看信息集合时。
- 用户多列表下的字段、筛选条件不同时。
高级列表表格
支持更多的高级自定义功能,比如自定义显示表格列、表格列排序。
按钮区域和搜索筛选区域在表格上方。
分页器固定在底部。
默认情况下,列表页的表格请优先使用这个高级表格列表。
拖放排序
自定义宽度
表格支持功能
固定列
- 两侧固定
- 左侧固定
- 右侧固定
滚动条
页面结构
页面标题栏
表格工具栏
有无按钮
有按钮
一个页面只允许出现一个主按钮,其余操作均使⽤次级按钮,按钮顺序按重要程度从左到右排列。
无按钮
视图切换
注意:目前线上还未实现。
某些场景下列表视图需要多种查看维度(如文件管理,需要列表和缩略图模式),表格工具栏可承载视图切换功能操作。
导入导出
可根据业务需求选择是否启用。
筛选器
表格工具栏右侧区域内的筛选器具有折叠功能,可以折叠展开筛选器内组件。如果对于页面纵向空间有较强需求,且过滤功能优先级较低,可以默认将筛选器整体收起。 在设计筛选器时,应根据实际的业务场景选择过滤字段和组件类型,常用的组件类型有如下几种:
- 输入框:适用于字符串类型的筛选对象,通过输入关键字实施模糊匹配。
- 选择框:适用于枚举类的筛选对象,请在绝大部分选择框上启用多项选择功能,以实现灵活的筛选需求。
- 组合选择框:适用于可选项数量较大的关联对象字段。
- 日期选择框:可根据实际情况选择日期选择框或日期段选择框。
最大化
注意:目前线上还未实现。
- 用户可点击表格工具栏最右侧的“最大化”按钮,可进入表格的全屏视图。在此视图下,用户可以专心在表格中处理事务不受其他信息的干扰。
- 标准筛选器自动隐藏,用户可以通过点击表格工具栏中的筛选器按钮来打开筛选器对话框。筛选结果会展示在表格工具栏与表格之间。
- 表格工具栏、表头、表格底栏锁定,分页器自动切换至单页展示 50 条数据。
表格内容区
表格区承载表格,表格有两种不同的布局方式:自适应表格和固定列表格。
自适应表格
自适应表格仅呈现比较关键的信息,用户可通过搜索、高级筛选功能,快速查找相关项目、处理数据。在这种布局下,表格不会出现横向滚动条,所有内容列等比自适应(操作列为固定列)。
固定列表格
固定列款表格适用于内容复杂、信息量庞大的场景。用户希望可以从表格中获取关键信息、执行操作,而不必频繁跳转至对象详情页面。这种布局下,通过横向滚动条解决内容溢出的问题。
表格翻页区
表格翻页区主要用来承载分页器。对于大多数表格来说,对象数量总是会随着业务的进行而不断增加,为避免数据量的增加而影响性能,应在设计之初就决定是否启用表格翻页区,使用分页器功能。
交互规则
页面操作
- 单项或批量操作应根据所选对象数量来改变可用、禁用状态。
- 对象的单项操作,如编辑,在未选择任何对象时应禁用。
- 对象的批量操作,如删除,在未选择任何对象时应禁用。
- 对于无需特定对象的操作,如新增,应始终保持可用状态。
表格行操作
通常情况下,针对行项目的操作应放置在表格的操作列,操作列列宽固定不受表格宽度和横向滚动条影响,总是处于表格最右侧并总是可见。
- 对于不可用的操作,不要使用按钮的不可用状态,请直接隐藏。
- 请将主要的操作放置在最左侧,溢出的操作按钮将自动收起到折叠按钮中。
设计适配
何时使用
- 当有大量结构化的数据需要展现时。
- 当需要对数据进行排序、搜索、分页、自定义操作等复杂行为时。