数据展示 / 01
基础表格
数据表格的最小可用形态：姓名 / 状态 / 数值三要素的标准表格、斑马纹、左右固定列、行内操作列，以及带筛选与批量选择的完整表格工具栏。
标准表格
tbl / tbl-wrap团队本月业绩
统计周期：2026-10-01 至 2026-10-03 · 数据每 10 分钟刷新
| 姓名 | 部门 | 状态 | 本月业绩 | 完成率 |
|---|---|---|---|---|
陈陈思远 |
产品设计部 | 在职 | ¥ 128,400 | 128% |
李李彦 |
前端工程部 | 在职 | ¥ 96,200 | 96% |
王王蒙 |
市场增长部 | 休假中 | ¥ 74,850 | 74% |
赵赵敏 |
客户成功部 | 试用期 | ¥ 52,300 | 52% |
周周航 |
数据平台部 | 已离职 | ¥ 18,600 | 18% |
斑马纹表格
zebra rows| 项目 | 负责人 | 当前阶段 | 交付日期 | 进度 |
|---|---|---|---|---|
| 移动端改版 v3.0 | 陈思远 | 设计评审 | 2026-10-24 | 86% |
| 设计令牌 2.0 | 李彦 | 已上线 | 2026-09-30 | 100% |
| 增长实验平台 | 王蒙 | 开发中 | 2026-11-15 | 54% |
| 工单智能分派 | 赵敏 | 已延期 | 2026-09-18 | 32% |
| 实时指标看板 | 周航 | 已归档 | 2026-08-20 | 100% |
固定列 · 横向滚动
sticky left / right表格列宽超出容器时左右各锁定一列
| 订单号 | 客户 | 下单时间 | 商品件数 | 收货城市 | 支付方式 | 物流单号 | 金额 |
|---|---|---|---|---|---|---|---|
| #NX-24891 | 陈思远 | 2026-10-03 09:24 | 3 件 | 上海 · 徐汇区 | 微信支付 | SF1024883117 | ¥ 1,284.00 |
| #NX-24890 | 李彦 | 2026-10-03 08:57 | 1 件 | 杭州 · 西湖区 | 支付宝 | YT7021488556 | ¥ 642.50 |
| #NX-24889 | 王蒙 | 2026-10-02 22:11 | 6 件 | 北京 · 朝阳区 | 银行卡 | JD3390228814 | ¥ 2,150.00 |
| #NX-24888 | 赵敏 | 2026-10-02 19:40 | 2 件 | 深圳 · 南山区 | 云闪付 | ZTO5581024477 | ¥ 899.00 |
| #NX-24887 | 孙悦 | 2026-10-02 15:08 | 8 件 | 成都 · 武侯区 | 微信支付 | SF1024883096 | ¥ 3,420.00 |
首列 sticky left-0、末列 sticky right-0，中间列可横向滚动。
带操作列
row-btn| 接口名称 | 所属服务 | 状态 | 平均耗时 | 今日调用 | 操作 |
|---|---|---|---|---|---|
| GET /v1/orders | order-service | 正常 | 42 ms | 128,491 |
|
| POST /v1/payments | pay-service | 灰度中 | 186 ms | 42,880 |
|
| GET /v1/users/:id | user-service | 限流中 | 318 ms | 96,204 |
|
| POST /v1/reports | report-service | 异常 | 1,204 ms | 8,120 |
|
筛选表格 · 批量选择
filter + bulkbar| 工单号 | 客户 | 问题摘要 | 状态 | 负责人 | 创建时间 | |
|---|---|---|---|---|---|---|
| #TK-10241 | 陈思远 | 移动端首页加载超过 5 秒 | 处理中 | 李彦 | 10-03 09:24 | |
| #TK-10240 | 王蒙 | 优惠券无法叠加使用 | 待处理 | — | 10-03 08:51 | |
| #TK-10239 | 赵敏 | 发票抬头需要修改 | 已完结 | 赵敏 | 10-02 21:10 | |
| #TK-10238 | 孙悦 | 订单发货后物流信息未更新 | 处理中 | 周航 | 10-02 17:32 | |
| #TK-10237 | 钱佳 | 账号无法接收短信验证码 | 已关闭 | 李彦 | 10-02 11:05 |
勾选任意一行后，工具栏 bulkbar 自动从顶部滑出并实时显示已选数量；表头复选框为全选。