案例:PO20261009016 —— 1 个装货段、2 个送货段; 展平后产品侧共 3 行(1 供产品 + 2 需产品)。 目标验证:列表分成基础信息列、装货段次列、送货段次列三块,并各自做合并单元格时的观感。
方案 A:表头分三区。 行模型仍是「先 1 行供产品,再各送货段产品行」(本单共 3 行)。 基础区 / 装货区整单合并(rowspan=3); 送货区按送货段合并——第 1 个送货段 rowspan=2(盖住供产品行 + 该送货产品行),第 2 个送货段 rowspan=1。 送货列不再出现「—」占位行,但第 1 个送货客户会在视觉上与供产品行对齐(略高一截)。
可实现:三区列 + 合并单元格都成立;送货客户/地址恰好 2 段。 代价:多送货时,第一个送货段的合并格会「借」供侧产品行的高度,和产品行不是严格语义对齐。
| 基础信息 | 装货段次 | 送货段次 | 产品明细(供/需) | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 计划编号 | 跟进状态 | 计划日期 | 车牌号 | 人员 | 装货客户 | 装货地址/时间 | 供合同 | 送货客户 | 送货地址/时间 | 需合同 | 侧别 | 产品名称 | 单位 | 计划量 |
| PO20261009016 | 待安排 | 2026-10-13 | 皖R4B299/皖R8131挂 | 彭双青(驾)、汪的霞(押) | 铜陵华博精细化工有限公司 |
铜官大道南段3888号铜陵市华兴化工有限公司
2026-10-13
|
— |
合肥瞻宇环保科技有限公司
rowspan=2(含上方供产品行高度)
|
—
2026-10-13
|
— | 供 | 示例装货产品 | 吨 | 30 |
| 需 | 示例送货产品 A | 吨 | 18 | |||||||||||
| 安庆市山峡化工有限公司 内部 |
高新区震虹路5号安庆市山峡化工有限公司
2026-10-13
|
— | 需 | 示例送货产品 B | 吨 | 12 | ||||||||
方案 B:同样三区列表头。 基础 / 装货 / 送货全部按整单合并(rowspan=3); 送货区在一个单元格内用虚线叠放 2 个送货段,不要求和右侧产品行一一对应。 产品明细仍 3 行。
实现最简单(送货列改成计划级合并 + 格内 v-for);送货客户/地址视觉上就是 2 行信息,不会出现第三行「—」。 代价:送货段与产品行不再纵向对齐。
| 基础信息 | 装货段次 | 送货段次 | 产品明细(供/需) | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 计划编号 | 跟进状态 | 计划日期 | 车牌号 | 人员 | 装货客户 | 装货地址/时间 | 供合同 | 送货客户 | 送货地址/时间 | 需合同 | 侧别 | 产品名称 | 单位 | 计划量 |
| PO20261009016 | 待安排 | 2026-10-13 | 皖R4B299/皖R8131挂 | 彭双青(驾)、汪的霞(押) | 铜陵华博精细化工有限公司 |
铜官大道南段3888号铜陵市华兴化工有限公司
2026-10-13
|
— |
合肥瞻宇环保科技有限公司
安庆市山峡化工有限公司 内部 |
—
2026-10-13
高新区震虹路5号安庆市山峡化工有限公司
2026-10-13
|
—
— |
供 | 示例装货产品 | 吨 | 30 |
| 需 | 示例送货产品 A | 吨 | 18 | |||||||||||
| 需 | 示例送货产品 B | 吨 | 12 | |||||||||||
对照 · 接近现状:同样三区列,但送货区按「展平行」各自出格—— 供产品行没有可绑定的唯一送货客户时显示 —,再跟 2 个真实送货段, 于是送货客户/地址看起来像 3 行(你截图里的问题)。
问题:业务上只有 2 个送货段,列表却多出一行「—」占位,扫读时像第三个送货客户。
| 基础信息 | 装货段次 | 送货段次 | 产品明细 | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| 计划编号 | 跟进状态 | 计划日期 | 车牌号 | 人员 | 装货客户 | 装货地址/时间 | 送货客户 | 送货地址/时间 | 侧别 | 产品名称 | 计划量 |
| PO20261009016 | 待安排 | 2026-10-13 | 皖R4B299/皖R8131挂 | 彭双青(驾)、汪的霞(押) | 铜陵华博精细化工有限公司 |
铜官大道南段3888号…
2026-10-13
|
— |
—
—
|
供 | 示例装货产品 | 30 |
| 合肥瞻宇环保科技有限公司 |
—
2026-10-13
|
需 | 示例送货产品 A | 18 | |||||||
| 安庆市山峡化工有限公司 内部 |
高新区震虹路5号…
2026-10-13
|
需 | 示例送货产品 B | 12 | |||||||