antd 单元格合并处理,分页也有效
程序员文章站
2024-02-29 09:41:58
...
函数:
/**
* 单元格合并处理
* @param text 当前单元格的值
* @param dataSource 当前分页所有数据
* @param key 当前列的dataIndex
* @param index 当前数据所在下标
* @returns {number} 待合并单元格数量
*/
// eslint-disable-next-line max-params
export default (text, dataSource, index, key) => {
// 上一行该列数据是否一样
if (index !== 0 && text === dataSource[index - 1][key]) {
return 0
}
let rowSpan = 1
// 判断下一行是否相等
for (let i = index + 1; i < dataSource.length; i++) {
if (text !== dataSource[i][key]) {
break
}
rowSpan++
}
return rowSpan
}
使用:
const columns = [
{
title: '周期',
dataIndex: 'cycle',
render: (text, record, index) => {
const obj = {
children: text || '',
props: {}
}
obj.props.rowSpan = mergeCells(text, dataList, index, 'cycle')
return obj
}
},
{
title: '排期人员',
dataIndex: 'userXhName',
},
{
title: '到面排期/已完成',
dataIndex: 'presentAllotNum',
render: (text, record) => {
return (
<span>{record.presentAllotNum || 0}/{record.presentFinishNum || 0}</span>
)
}
},
{
title: '交付排期/已完成',
dataIndex: 'onBoardAllotNum',
render: (text, record) => {
return (
<span>{record.onBoardAllotNum || 0}/{record.onBoardFinishNum || 0}</span>
)
}
}
]
下一篇: java 解析压缩文件-gzip
推荐阅读