フロントエンド ANTD はセルを動的にマージします

背景: フロントエンドには同じデータ ソースと隣接する行が含まれており、行の結合が必要な場合にはセルの動的な結合が必要になります。

// 定义合并单元格方法 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; };

columnで列をレンダリングするには、 メソッドを呼び出しますmergeCells。

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; }, }, ]