前端-antd 动态合并单元格

最新推荐文章于 2024-07-30 10:56:44 发布

黑夜照亮前行的路

最新推荐文章于 2024-07-30 10:56:44 发布

阅读量478

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_24373725/article/details/129841834

版权

背景：前端涉及具有相同数据源且相邻行，进行行合并的需求时，需要动态合并单元格。

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