ant-design实现单元格合并

如下图所示，官网只给了一个写死的例子，不太符合正常项目中遇到的情况.

项目中一般是后端经过排序把数据返回给前端，前端根据字段设置rowSpan,期望结果如下图

核心代码如下

执行数据处理方法

export const handleSpan = (result: any[], key: string) => {
    result.forEach((e) => (e.rowSpan = 1));
    // 记录开始合并的位置
    let num = -1;
    let obj = {};
    obj[key] = '';
    result.forEach((e, index) => {
      //如果不一致的时候需要重置
      if (e[key] !== obj[key]) {
     	obj[key] = e[key];
        num = index;
      } else {
        e.rowSpan = 0;
        if (num > -1) {
          result[num].rowSpan += 1;
        }
      }
    });
    return result;
  };

数据处理方法

 const arr: sheetListItem[] = handleSpan(res.inquiryDetails, 'productName');
 setInquiryDetails(arr);

表格中调用

  const columns = [
    {
      title: '商品名称',
      dataIndex: 'productName',
      render: (text: any, row: any) => {
        return allRender(text, row);
      },
    },
    {
      title: '数量',
      dataIndex: 'inquiryNum',
    },
]

 const allRender = (text: string, row: { rowSpan: number }) => {
    const obj = {
      children: text,
      props: {
        rowSpan: 1,
      },
    };
    obj.props.rowSpan = row.rowSpan;
    return obj;
  };