欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

antd 单元格合并处理,分页也有效

程序员文章站 2024-02-29 09:41:58
...

antd 单元格合并处理,分页也有效

 函数:

/**
 * 单元格合并处理
 * @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>
        )
      }
    }
  ]