Antd 合并table行、列

场景1

const list = [
  {
    key: '1',
    rowId: 1,
    name: 'Jim Green',
    tel: '0571-22098333',
    phone: 18889898888,
    age: 42,
    address: 'London No. 1 Lake Park',
  },
  {
    key: '2',
    rowId: 1,
    name: 'Joe Black',
    age: 32,
    tel: '0575-22098909',
    phone: 18900010002,
    address: 'Sidney No. 1 Lake Park',
  },
  {
    key: '3',
    rowId: 1,
    name: 'Jim Red',
    age: 18,
    tel: '0575-22098909',
    phone: 18900010002,
    address: 'London No. 2 Lake Park',
  },
  {
    key: '4',
    rowId: 2,
    name: 'Jake White',
    age: 18,
    tel: '0575-22098909',
    phone: 18900010002,
    address: 'Dublin No. 2 Lake Park',
  },
  {
    key: '5',
    rowId: 2,
    name: 'Jake White',
    age: 18,
    tel: '0575-22098909',
    phone: 18900010002,
    address: 'Dublin No. 3 Lake Park',
  },
];
//计算rowSpan
const result = list.reduce((pre, cur) => {
	pre.push({ ...cur, rowSpan: 0 });
	const firstIndex = list.findIndex((item) => item.rowId === cur.rowId);
	pre[firstIndex].rowSpan++;
	return pre;
}, []);

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    onCell: ({rowSpan}) => ({rowSpan})
  },
  {
    title: 'Home phone',
    dataIndex: 'tel',
  },
  {
    title: 'Phone',
    dataIndex: 'phone',
  },
  {
    title: 'Address',
    dataIndex: 'address',
    onCell: ({rowSpan}) => ({rowSpan})
  },
];
<Table columns={columns} dataSource={result} bordered />

数据格式：

效果：

场景2

const columns = [
  {
    title: '单量/工序',
    dataIndex: 'process',
    onCell: ({isForecastData,rowSpan}) => {
      return {
        rowSpan: isForecastData?1:rowSpan,
        colSpan: isForecastData?2:1,
      }
    }
  },
  {
    title: '单量/工时',
    dataIndex: 'time',
    onCell: ({isForecastData}) => ({colSpan:isForecastData?0:1})
  },
  {
    title: '2023-09-18',
    dataIndex: '2023-09-18',
  },
  {
    title: '2023-09-19',
    dataIndex: '2023-09-19',
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: 100,
    render: (val, record) => (
      <Button type="link">
        查看
      </Button>
    ),
    onCell: ({isForecastData,rowSpan}) => {
      return {
        rowSpan: isForecastData?rowSpan:1,
      }
    }
  }
];
const data: DataType[] = [
  {
    '2023-09-19': 12000,
    process: '预测单量-收货量',
    '2023-09-18': 12000,
    isForecastData: '1',
    time: '',
    rowSpan: 2,
  },
  {
    '2023-09-19': 450,
    process: '预测单量-发货量',
    '2023-09-18': 450,
    isForecastData: '1',
    time: '',
    rowSpan: 0,
  },
  {
    '2023-09-19': 23928,
    process: 'd5d8质检',
    '2023-09-18': 23928,
    time: '操作单量',
    rowSpan: 3,
  },
  {
    '2023-09-19': 10,
    process: 'd5d8质检',
    '2023-09-18': 10,
    time: '辅助工时',
    rowSpan: 0,
  },
  {
    '2023-09-19': 52,
    process: 'd5d8质检',
    '2023-09-18': 52,
    time: '日常投入工时',
    rowSpan: 0,
  },
];
<Table columns={columns} dataSource={data} bordered />

效果如下：