运输计划列表 · 三区列(基础 / 装货 / 送货)合并 Demo

案例:PO20261009016 —— 1 个装货段、2 个送货段; 展平后产品侧共 3 行(1 供产品 + 2 需产品)。 目标验证:列表分成基础信息列、装货段次列、送货段次列三块,并各自做合并单元格时的观感。

PO20261009016 待安排 皖R4B299/皖R8131挂 基础信息区 装货段次区 送货段次区

方案 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

合并规则:基础/装货 rowspan = 整单行数;送货段 首段 rowspan = 供产品行数 + 本段产品行数,后续段 rowspan = 本段产品行数。

方案 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

合并规则:三区段信息列均为 rowspan = 整单行数;多送货在格内用分隔线叠放。 产品明细列不合并。

对照 · 接近现状:同样三区列,但送货区按「展平行」各自出格—— 供产品行没有可绑定的唯一送货客户时显示 —,再跟 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

对照用:说明「三区列」本身可行,但若送货列仍跟供/需产品行一一出格,多送货时就会冒出「—」。