表格个性化,让数据展示更贴近您的需求

130 阅读3分钟

01 引言 introduction

在实际业务中,表格数据多、列数多的场景十分常见。用户期望能根据个人操作习惯和使用场景查看表格信息,满足可定制展示的需求。然而,传统表格无法满足个体实际使用场景下的不同展示需求,影响工作效率。

Choerodon UI 表格个性化提供了多项功能,让用户可以轻松制定表格展示,满足不同场景下的需求。

02 设计特性 design features

/ 个性化设置**** /

用户可通过点击表格列头齿轮图标,右侧弹出抽屉查看表格个性化相关设置。

1. 显示设置: 支持用户配置表格显示密度及是否开启斑马纹效果。

2. 表格 设置: 支持用户根据使用场景、显示设备等,配置表格高度显示方案。

  • 自动高度: 高度根据行数据量自动撑开,随页面滚动时表头不固定。
  • 固定高度: 高度固定数值,数据量超出则出现滚动条,表格内容滚动时表头固定。
  • 自适应高度: 高度动态计算而来(表格高度=窗口高度-自适应高度),可根据窗口大小动态变化,内容滚动时表头固定。

3. 表头 设置: 支持用户对表格各列进行显隐、顺序、冻结、重命名等个性化控制。

  • 列显隐: 右侧 Switch 组件控制当前列是否显示,当列属性 hideable={false} 及存在合并列头时,则禁用用户修改。
  • 列顺序: 左侧列名前存在拖拽柄,支持拖拽控制列顺序,可跨组拖拽控制列冻结状态。
  • 列信息: 鼠标悬停右侧出现操作面板,支持用户重命名当前列标题,快捷进行冻结操作、调整列顺序。

/ ****个性化存储 /

通过组件库的全局配置,以上用户个性化配置数据可进行自定义存储,支持数据持久化。

  • 前端缓存配置: 根据项目需求选择前端缓存方式(例如:localStorage),对用户个性化数据进行前端缓存和配置持久化。这样可以避免仅配置后端接口存储时造成的多次查询等不必要的资源浪费。
  • 后端接口配置: 与后端接口协作,妥善存储用户个性化数据,以确保用户跨场景使用。并保障了配置信息的可靠性和可恢复性。

03 场景案例 Scenario

为电商公司提升库存管理效率

/ 案例背景 /

某电商公司拥有多类型商品的库存。他们的主要痛点是,由于商品表格列数信息繁多,管理人员往往需要花费大量时间在表格信息筛选分析上面。这导致库存管理效率低下,影响工作效率。

/ 解决方案 /

电商公司开启 Choerodon UI 表格组件个性化,不同商品管理人员可根据商品类型进行个性化配置。

  1. 针对大数据量商品相关表格修改显示密度,固定核心列
  2. 控制对应商品关键列顺序、隐藏该商品不重要的列显示
  3. 根据个人常用窗口大小和显示设备,调整表格的高度、对应列宽度,确保内容合理显示

/ 应用效果 /

通过使用表格组件个性化,不同商品管理人员可以更快速地有针对性地查看商品信息,完成库存盘点和调整工作,库存管理效率得到显著提升。

欢迎试用welcome to try

以上就是 Choerodon UI 动态筛选条高级配置的基本介绍,如果您有更好的想法和建议,欢迎积极反馈给我们。欢迎试用,我们诚挚的邀请您和我们一起共建 Choerodon UI,期待您的 Issue!

● 官网demo

● github