Choerodon UI Table - 助力企业高效处理列表合并行列等复杂场景

251 阅读4分钟

01 引言 Introduction

在企业应用系统中,表格数据的展示常常不够清晰。当数据列过多,没有清晰的展示结构时,信息传递的直观性降低,使用者提取信息变得困难。

Choerodon UI Table 通过合并行列聚合多字段视图高级数据分组等功能,优化了数据展示,支持业务逻辑分类,并提供多种分组方式,实现快速、清晰的信息展示。

02 多字段复杂场景介绍 Scene Introduction

/组合列/

1. 设计解读

  • 通过合并字段数据列,创造复合列,增强数据展示的灵活性和理解度。
  • 这种设计方式能够更灵活地展示数据,提高数据的可读性和可理解性。丰富企业分析与决策的信息维度。

2. 构建方式

  • 在基础表格实现中,将列组件按照树形结构分类组合即可实现组合列,方便快捷。

详细示例(点击下列文字超链接跳转):

Choerodon UI  组合列

/聚合字段视图/

1. 设计解读

  • 聚合视图通过汇总多个字段的原始数据,按维度分类呈现,简化复杂信息。
  • 视图对每个分类的字段进行聚合,将多个字段最终呈现到一个大单元格内,并支持独立控制收起展开,结合列头可清晰展示信息。

2. 构建方式

  • 高效、便捷,仅需在组合列构建方式的基础上,为需要展示聚合模式的组合列配置 aggregation 属性,即可完成组合列往聚合视图的变化。
  • 可配置切换按钮,让表格在平铺展示和聚合视图两种模式切换,满足不同的使用人群。

3. 模式优点

  • 提供更全面的信息: 通过对原始数据进行分类加工,提供更全面、更丰富的信息,帮助用户更好地理解数据。
  • 数据查看更直观: 聚合视图可以将大量的原始数据简化成少量的汇总信息,使得数据查看分析更加高效和简便。
  • 灵活性和可定制性: 聚合视图的生成通常是基于用户的需求进行定制的,具有很高的灵活性,可以根据不同的设计生成不同的聚合结果。

详细示例:

open.hand-china.com/choerodon-u…

/高级数据分组/

1. 设计解读

  • 通过分类标准,将数据分为不同组或集合,增强结构和关系理解。
  • 这种分组操作可以帮助用户更好地理解数据的结构和关系,从而支持数据分析、报告生成和决策制定。
  • 例: 公司、部门字段支持 4 * 4 = 16 种分组展示方式,且支持聚合/平铺字段切换。

2. 构建方式

  • 在 Choerodon UI 的表格组件为数据分组设计了特定的属性 groups,可根据需求配置字段的父子级关系,从而自动生成数据分组的表格。

3. 模式优点

  • 数据可读性高: 数据分组可将数据按照多种维度分组(列、行、头)进行分类,使得数据的结构更加清晰,易于理解和阅读。
  • 展示模式多:可将数据切换为平铺和树形展示模式,树形模式支持折叠。
  • 灵活性和定制性:用户可以根据实际需求选择分组字段和分组方式,自定义分组的层级和粒度。这种灵活性使得数据分组能够适应各种复杂的数据分析需求。

详细示例(点击下列文字超链接跳转):

Choerodon UI  Tab表格

03 场景应用 Scenario application

/案例背景/

一家大型企业,拥有众多上游供应链合作伙伴,时常需要就采购的产品进行报价。企业需对不同供应商的产品报价、评分、收付款等信息进行比对。然而,传统的表格展示方式不够直观,信息提取不够高效,影响了领导层的准确决策。因此,企业迫切需要一个更准确、更直观的表格多字段合并、分组视图来辅助决策。

/解决方案/

应用 Choerodon UI 组件库的表格 高级 数据分组 功能,利用内置的模式,快速配置属性。

  1. 准备基础数据;
  2. 先将行数据进行分类,将要组合展示的列合并;
  3. 采用表格高级数据分组功能,配置 groups 属性,自定义分组的层级和粒度。

/应用效果/

开发人员快速构建表格,将同一家供应商的多字段信息一屏展示,用户可以对不同维度间的数据直观的对比。让用户更直观的了解信息,收起不关注的已读字段,更高效的处理工作。

欢迎试用welcome to try

我们将持续优化 Table 组件功能,优化客户体验。如果您有更好的想法和建议,欢迎您积极反馈给我们。

● Table

● github