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