antd Table 组件动态合并单元格

js 合并单元格实现逻辑

const data = showTableList && showTableList.reduce((current, prev, index) => {
    const child = prev.waveNavigationBodyList.map((item, n) => {
        return {
            key: `${index}-${n}`,
            ...item,
            id: prev.id,
            com_isFirstRow: n === 0,
            com_cargoName: prev.cargoName,
            com_length: prev.waveNavigationBodyList.length,
            skuName: `${item.skuName}`,
            skuCode: item.skuCode,
            upcCode: prev.upcCode,
            com_packQty: prev.packQty
        }
    })
    current.push(...child)
    return current
}, [])

columns部分代码如下：

const columns = [
    {
        title: '货主',
        dataIndex: 'com_cargoName',
        key: 'com_cargoName',
        width: 140,
        render: (text, row, index) => {
            return {
                children: <span>{text}</span>,
                props: {
                    rowSpan: row.com_isFirstRow ? row.com_length : 0,
                },
            };
        }
    },
    {
        title: '商品条码',
        dataIndex: 'skuCode',
        key: 'skuCode',
        width: 140,
    },
    {
        title: '商品名称&数量',
        dataIndex: 'name',
        key: 'name',
        width: 160,
        render: (text, row, index) => {
            return <div className='row-name'>
                <span>{row.skuName}</span>
                <span>&#935;{row.skuQty}</span>
            </div>
        }
    },
    {
        title: '包裹数量',
        dataIndex: 'com_packQty',
        key: 'com_packQty',
        width: 140,
        render: (text, row, index) => {
            return {
                children: <span>{text}</span>,
                props: {
                    rowSpan: row.com_isFirstRow ? row.com_length : 0,
                },
            };
        }
    },
];

 render部分如下：

return (
    <Table
        columns={columns}
        dataSource={data}
        pagination={false}
        scroll={{ x: '100%', y: 1000 }}
        rowKey={record => record.id}
    />
)

后端返回数据格式如下：

export const showTableList= [
  {
    cargoCode: "apple",
    cargoName: "apple",
    id: "0067727896",
    packQty: 2,
    waveNavigationBodyList: [{
      desc: "iphone8豪华版 x 1)",
      skuCode: "iphone8",
      skuName: "iphone8豪华版",
      skuQty: 1,
      upcCode: "iphone8",
    }, {
      desc: "iphone8s金色版 x 1)",
      skuCode: "iphone8s",
      skuName: "iphone8s金色版",
      skuQty: 1,
      upcCode: "iphone8s"
    }],
  },
  {
    cargoCode: "fyh-1",
    cargoName: "fyh-1",
    id: "3894431670",
    packQty: 1,
    waveNavigationBodyList: [
      {
        desc: "茉莉花茶 x 1)",
        skuCode: "G1614754512364",
        skuName: "茉莉花茶",
        skuQty: 1,
        upcCode: "G1614754512364",
      }, {
        desc: "心相印纸巾 x 1)",
        skuCode: "G1614754619484",
        skuName: "心相印纸巾",
        skuQty: 1,
        upcCode: "G1614754619484"
      }
    ]
  }
]