Ant Design Table订单号匹配时合并行异常问题求助

问题原因分析 #

你遇到的布局异常，大概率是两个核心问题导致的：

1. 同订单号的行未连续排列：Ant Table的rowSpan合并仅支持连续行，分散的同订单号行无法正确合并，会导致表格结构错乱。
2. 未隐藏重复订单号的单元格：仅设置首行的rowSpan值是不够的，后续同订单号的对应单元格必须设置rowSpan={0}，让Table跳过渲染这些单元格，否则会破坏表格的行列结构。

解决方案步骤 #

1. 预处理数据：排序+标记rowSpan

先对数据按orderNumber排序，确保同订单号的行连续；然后为每行添加orderRowSpan字段，首行设为订单号的总出现次数，后续行设为0。

const processOrderData = (rawData) => {
  // 1. 按订单号排序，保证同订单号行连续
  const sortedData = [...rawData].sort((a, b) => 
    a.orderNumber.localeCompare(b.orderNumber)
  );

  // 2. 统计每个订单号的出现次数
  const orderCountMap = {};
  sortedData.forEach(item => {
    orderCountMap[item.orderNumber] = (orderCountMap[item.orderNumber] || 0) + 1;
  });

  // 3. 为每行设置rowSpan值
  let currentOrder = null;
  let remainingSpan = 0;
  return sortedData.map(item => {
    if (item.orderNumber !== currentOrder) {
      currentOrder = item.orderNumber;
      remainingSpan = orderCountMap[currentOrder];
      return { ...item, orderRowSpan: remainingSpan };
    } else {
      remainingSpan--;
      return { ...item, orderRowSpan: 0 };
    }
  });
};

2. 配置Table列的渲染逻辑

在Order Number列的render函数中，根据预处理的orderRowSpan值设置单元格的rowSpan属性：

const columns = [
  {
    title: 'Order Number',
    dataIndex: 'orderNumber',
    render: (text, record) => ({
      children: text,
      props: {
        rowSpan: record.orderRowSpan
      }
    })
  },
  // 其他列配置...
  {
    title: 'Product',
    dataIndex: 'product'
  },
  {
    title: 'Quantity',
    dataIndex: 'quantity'
  }
];

3. 渲染Table

将预处理后的数据传入Table组件：

const processedData = processOrderData(yourRawOrderData);

return <Table columns={columns} dataSource={processedData} bordered />;

关键注意事项 #

• 数据排序不可省略：如果原数据中同订单号的行是分散的，必须先排序，否则合并逻辑完全失效。
• rowSpan=0的作用：Ant Table会自动隐藏rowSpan=0的单元格，确保合并后的单元格占据正确的行数。
• 版本兼容：确保使用的Ant Design版本是4.x及以上，旧版本对rowSpan的处理存在已知bug。

内容的提问来源于stack exchange，提问作者desh