---
url: /mobile/data-display.md
---
# 数据展示

桌面端的信息密度手段（宽表格、多栏描述列表、大数盘点）在移动端全部换一种载体：**表格 → 卡片列表**，**描述列表 → 分组单元格**，**统计区 → 2×2 网格**。字段的取舍比排布更重要——卡片上只留「决策需要」的字段，其余进详情。

## 表格 → 卡片列表

DataTable 在移动端不缩列、不出横向滚动条，而是把「一行」翻译成「一张卡片」：

| 表格列 | 卡片槽位 |
| --- | --- |
| 业务主键（单号） | 主行标题 |
| 状态列 | 主行右侧状态标签 |
| 金额 / 时间 / 负责人 | 两列字段网格（最多 4 格） |
| 操作列 | 底部金额 + 一个动作按钮 |

行点击进详情页承担「查看更多」，卡片内不再放第二、第三个操作按钮。

筛选器是移动列表的标配：分段器（`Segmented block`）承担高频枚举筛选，实时过滤当前列表；低频组合条件进「筛选」底部面板（见[数据录入](/mobile/data-entry)）。

## 描述列表 → 分组单元格

DetailDescriptions / Descriptions 的「label-value 对」在移动端改为**分组卡片 + 双行单元格**：相关字段聚成一组卡片，组内一行一个字段，读起来是「从上往下扫」，而不是桌面「从左往右对」。

分组标题用 CellStack 的主行（加粗、小号），与字段行的区别靠前后间距，不再依赖桌面的分栏与分隔线。

## 统计区 → 2×2 网格

桌面顶部一排四五个 Statistic 在移动端折叠为 2×2 网格：数值保留，标签缩短，趋势说明（同比箭头、辅助文案）仅在空间富余时保留。超过 4 个指标说明还没想清楚移动端要什么——先做减法。