表格Table
你可能会说
订单数据堆在一起太乱了，帮我排成表格，一行一条。
表格是按行和列展示同一组字段、便于比较多条记录的数据组件订单、成员和库存可放进表格逐列比较。排序、筛选和分页需明确反馈当前状态；列很多时还要处理小屏和横向滚动。
你可以这样告诉 AI Agent
请把订单列表整理成表格，一行一笔订单，固定展示编号、金额、状态和时间，保留现有筛选。手机端优先保留关键列，其余信息可横向查看或进入详情。请验证排序后各列仍对应同一订单。
什么时候用
- 多行同构数据需要逐列比较，如用户、订单、日志任务状态登录页进行中支付流已完成
- 需要排序、筛选才能快速找到目标数据名称价格 ↑库存键盘¥ 99210鼠标¥ 19986
- 每行都要带行内操作：编辑、删除、查看项目状态操作官网改版进行中编辑 删除年报设计已完成编辑 删除
- 后台管理页的主体视图，配合搜索和批量操作🔍 搜索用户名新建用户林小hu管理员阿油成员
什么时候不用
- 只有少量行和字段：使用 描述列表 Descriptions字段值版本v2.4.0就一行数据，表头比内容还重
- 新品发布图和段落挤进格子，全变形了
- 手机窄屏直接显示过多列，导致频繁横向滚动列太多，手机上得一直左右滑
- 只展示层级时用树形控件 Tree；还要比较多列时再考虑树形表格名称大小src/—components/—层级关系只靠缩进表示，父子归属不清楚
组成结构 · Anatomy
项目状态负责人
官网改版进行中林小hu
整张表：一个表头 + 若干数据行
说明每列含义，排序入口也在这
一行就是一条记录
行列交叉的最小格子，内容要克制
常见变体 · Variants
基础表格Basic
名称库存
键盘210
鼠标86
数据量不大、没有特殊需求时的默认选择
斑马纹Striped
名称库存
键盘210
鼠标86
行数较多时，使用条纹帮助区分相邻行
紧凑Compact
名称库存
键盘210
鼠标86
显示器42
一屏要塞进更多行的密集后台场景
带排序Sortable
名称价格 ↑
键盘¥99
鼠标¥199
用户需要按某列大小快速找目标时
典型使用场景
后台用户管理
用户角色状态
林小hu管理员正常
阿油成员已禁用
订单列表
全部待付款待发货已完成
订单号商品金额状态
2026071801无线耳机¥ 299.00待付款
2026071796机械键盘¥ 199.00待发货
数据报表
7 月销售报表
周次销售额 ↓订单数环比
第 29 周¥ 286,4003,146↑ 12.5%
第 28 周¥ 254,6002,903↓ 3.2%
操作日志
操作日志
时间操作人操作
14:32:05林小hu发布了「官网改版 v2」
14:28:41阿油删除了文件 旧版首页.sketch
13:56:12KK修改了成员权限
延伸阅读 · 权威出处
快速练习