antd合并表格相同列

antd4.x版可用

// antd表格合并列
/*
key: 键值
row：当前行
index：当前行索引
listData：表格全部数据
reactDom：要渲染的jsx
*/
export const rowSpanTable = (key, row, index, listData, reactDom) => {
  let rowSpan = 1; //默认不合并
  let arrIndex = 0; // 记录当前
  listData.forEach((item, index) => { // 找到当前渲染行
    if (item.id === row.id) {
      arrIndex = index;
    }
  });
  if (index === 0) { // 因第一行没有上一级所以单独拎出来
    listData.forEach((item, index) => {
      if (index > arrIndex && item[key] === row[key]) {
        rowSpan += 1;
      }
    });
  } else if (listData[arrIndex][key] === listData[arrIndex - 1][key]) { // 如歌当前的内容与上一级的内容相同则不渲染
    rowSpan = 0;
  } else {
    listData.forEach((item, index) => {
      if (index > arrIndex && item[key] === row[key]) {
        rowSpan += 1;
      }
    });
  }
  return {
    children: reactDom,
    props: {
      rowSpan,
    },
  };
};

用法

        <Table
          dataSource={labelList.tagList}
          rowKey="id"
          pagination={{
            position: 'bottom',
            pageSize: listData.pageSize,
            current: listData.pageNo,
            total: labelList.totalCount,
            onChange: pageChange,
          }}
        >
          <Column
            title=""
            align="center"
            dataIndex="sort"
            render={(sort, row, index) =>
              rowSpanTable(
                'sort',
                row,
                index,
                labelList.tagList,
                <span>{sort}</span>
              )
            }
          />
          <Column title="key" align="center" dataIndex="id" />
        </Table>

说明

数据自行模拟
必要条件就是要和并的数据必须的挨在一起才可以合并
想要那一列合并就用在那里即可