主子表的数据页面如何布局
设计主子表数据页面的布局方案。这是一个经典的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 │ │ │ └───────────┘ │ │ [保存][关闭] │ └─────────────────┘适用场景：主表字段多、屏幕空间有限，或子表需要复杂编辑优势：保持主表上下文，不离开当前页面
设计决策建议
表格
| 维度 | 推荐方案 | 考量因素 |
|---|---|---|
| 主表数据量 | 大量数据 → 上下展开式或弹窗式 | 避免左侧滚动条过长 |
| 子表数据量 | 大量明细 → 左右分栏 | 子表需要独立分页和筛选 |
| 操作频率 | 高频查看明细 → 左右分栏 | 减少点击次数 |
| 编辑复杂度 | 子表需独立CRUD → 弹窗/抽屉 | 提供完整表单空间 |
| 屏幕尺寸 | 移动端优先 → 上下式或弹窗 | 响应式适配 |
关键交互细节
数据同步：
主表刷新时，子表应同步刷新或清空（避免显示旧数据的明细）
子表编辑后，主表的汇总字段（如金额、数量）需实时更新
空状态处理：
未选择主表行时，子表区域显示"请选择主表记录查看明细"
主表行为空时，隐藏子表或显示占位图
性能优化：
主表切换时，子表加载使用骨架屏或loading动画
支持主表行hover预加载子表数据（如果子表数据量小）
批量操作：
主表多选时，子表可显示"已选择3条记录，共5条明细"的汇总视图
或提供切换按钮：查看"当前选中" vs "全部展开"
您目前的主子表数据量级和主要操作场景是怎样的？我可以给出更具体的实现建议。