Front-end-antd dynamically merges cells

Background: The front-end involves adjacent rows with the same data source, and the cells need to be dynamically merged when merging rows.

// 定义合并单元格方法 const mergeCells = (text: any, data: OVERSEAS.ContractType[], key: string, index: number) => { // 上一行该列数据是否一样 if (index !== 0 && text === data[index - 1][key]) { return 0; } let rowSpan = 1; // 判断下一行是否相等 // eslint-disable-next-line no-plusplus for (let i = index + 1; i < data.length; i++) { if (text !== data[i][key]) { break; } rowSpan += 1; } return rowSpan; };

columnTo render a column in , call the mergeCellsmethod.

const [tableData, setTableData] = useState([]) // 数据源 const columns = [ { title: '报关文件', dataIndex: '#####', key: '#####', width: 120, search: false, render: (text, record, index) => { const obj = { children: text, props: {}, }; obj.props.rowSpan = mergeCells(text, tableData, '#####', index); return obj; }, }, ]