企业官网建设流程全解析

设计主子表数据页面的布局方案。这是一个经典的CRUD界面模式，核心挑战是在有限空间内同时展示关联数据，并保持操作流畅性。

常见布局模式

1. 左右分栏布局（最常用）

plain

复制

┌─────────────────────────────────────────┐ │ 查询条件 [输入框] [输入框] [查询][重置] │ ├────────────────────┬────────────────────┤ │ │ 子表标题 [新增] │ │ 主表数据列表 ├────────────────────┤ │ (单选/多选行) │ ┌──────────────┐ │ │ ┌──────────┐ │ │ 子表数据1 │ │ │ │ 订单001 │◄───┼──┤ 明细A │ │ │ │ 订单002 │ │ │ 明细B │ │ │ │ 订单003 │ │ └──────────────┘ │ │ └──────────┘ │ [分页控件] │ │ [分页] │ │ ├────────────────────┴────────────────────┤ │ [批量操作按钮] │ └─────────────────────────────────────────┘

适用场景：主表数据量适中，需要频繁切换查看不同主记录明细交互要点：

• 主表行点击即加载子表，无需额外确认

• 当前选中行高亮显示

• 支持主表多选时，子表显示聚合数据或提示"已选择N项"

2. 上下布局（表格嵌套/展开式）

plain

复制

┌─────────────────────────────────────────┐ │ 查询条件... │ ├─────────────────────────────────────────┤ │ 主表标题 [新增][批量删除] │ ├─────────────────────────────────────────┤ │ ▼ 订单001 客户A ¥5000 [编辑][删除] │ │ ┌─────────────────────────────────────┐│ │ │ 子表明细： ││ │ │ 商品A x2 ¥2000 ││ │ │ 商品B x1 ¥3000 ││ │ └─────────────────────────────────────┘│ │ ▶ 订单002 客户B ¥3000 │ │ ▶ 订单003 客户C ¥8000 │ └─────────────────────────────────────────┘

适用场景：主表字段较少，子表数据简单，节省横向空间变体：点击展开图标后异步加载子表，避免一次性加载过多数据

3. 弹窗/抽屉详情式

plain

复制

主表页面（全宽表格） ┌─────────────────────────────────────────┐ │ 查询条件... │ ├─────────────────────────────────────────┤ │ [新增] [批量操作] │ ├─────────────────────────────────────────┤ │ ID 名称 金额 状态 操作 │ │ 001 订单A ¥5000 已完成 [查看][编辑] │ │ 002 订单B ¥3000 待发货 [查看][编辑] │ └─────────────────────────────────────────┘ 点击[查看/编辑] → 右侧滑出抽屉/弹出模态框 ┌─────────────────┐ │ 订单详情 │ │ ───────────── │ │ 基本信息表单... │ │ │ │ 子表明细 │ │ ┌───────────┐ │ │ │ 商品A x2 │ │ │ │ 商品B x1 │ │ │ └───────────┘ │ │ [保存][关闭] │ └─────────────────┘

适用场景：主表字段多、屏幕空间有限，或子表需要复杂编辑优势：保持主表上下文，不离开当前页面

设计决策建议

表格

关键交互细节

数据同步：

• 主表刷新时，子表应同步刷新或清空（避免显示旧数据的明细）

• 子表编辑后，主表的汇总字段（如金额、数量）需实时更新

空状态处理：

• 未选择主表行时，子表区域显示"请选择主表记录查看明细"

• 主表行为空时，隐藏子表或显示占位图

性能优化：

• 主表切换时，子表加载使用骨架屏或loading动画

• 支持主表行hover预加载子表数据（如果子表数据量小）

批量操作：

• 主表多选时，子表可显示"已选择3条记录，共5条明细"的汇总视图

• 或提供切换按钮：查看"当前选中" vs "全部展开"

您目前的主子表数据量级和主要操作场景是怎样的？我可以给出更具体的实现建议。