表格同类型业务合并单元格

import { Tooltip, Box } from 'antd';
import React from 'react';

export const getRowSpan = (propName, reportList, mergeRule) => (width) => (
	text,
	record,
	index,
) => {
	const obj = {
     children: (
        <Tooltip title={text}>
           <Box className='ellipsis' style={{ width: `${width - 34}px` }}>
               {text}
           </Box>
        </Tooltip>
     ),
     props: {
        rowSpan: 0,
     },
	};
	let dataSource = gCoral.deepCopy(reportList?.personDeptManagementReportInfos) || [];
	if (!dataSource.length) {
	    return obj;
	}
	const isInSameType = mergeRule || ((propName, record, row) => {
     const projectName = 'projectName';
     const collaborationMethod = 'collaborationMethod';
     const deptName = 'deptName';
     if (propName === 'collaborationMethod') {
         return record[projectName] === row[projectName];
     } else if (propName === 'deptName') {
         return record[collaborationMethod] === row[collaborationMethod];
     } else if (propName === 'personTitleName') {
         return record[deptName] === row[deptName];
     }
     return true;
   });
	const [endIndex] = dataSource.slice(index).reduce(([pre, isEnd], row) => {
      if (
          !isEnd &&
          row[propName] === record[propName] &&
          isInSameType(propName, record, row)
      ) {
          return [pre + 1, false];
      }
      return [pre, true];
	}, [0, false]);
        
	const preIRow = dataSource[index - 1];
	const isEqual = (curKey, parentType) => propName === curKey && record?.[parentType] !== preIRow?.[parentType];
        if (
           index === 0 ||
           preIRow?.[propName] !== record?.[propName] ||
           isEqual('projectName', 'regionName') ||
           isEqual('deptName', 'projectName') ||
           isEqual('collaborationMethod', 'projectName') ||
           isEqual('deptName', 'collaborationMethod') ||
           isEqual('personTitleName', 'deptName')
        ) {
           obj.props.rowSpan = endIndex;
        }
        return obj;
   };

export const getRowSpanForJsf = (...args) => {
	const isInSameType = (propName, record, row) => {
       const regionName = 'regionName';
       const projectName = 'projectName';
       const deptName = 'deptName';
       if (propName === 'projectName') {
            return record[regionName] === row[regionName];
       } else if (propName === 'deptName') {
            return record[projectName] === row[projectName];
       } else if (propName === 'personTitleName') {
            return record[deptName] === row[deptName];
       }
       return true;
	};
	return getRowSpan(...args, isInSameType);
};

useEffect(() => {
	let columnsInitial = [
    {
        title: '所属区域',
        dataIndex: 'regionName',
        key: 'regionName',
        align: 'center',
        fixed: 'left',
        width: 220,
        render: regionRowSpan(220),
    },
    {
        title: '项目名称',
        dataIndex: 'projectName',
        key: 'projectName',
        align: 'center',
        fixed: 'left',
        width: 260,
        render: projectRowSpan(260),
    },
    {
        title: '单位名称',
        dataIndex: 'deptName',
        key: 'deptName',
        align: 'center',
        fixed: 'left',
        width: 300,
        render: deptNameRowSpan(300),
    },
    {
        title: '项目职务',
        dataIndex: 'personTitleName',
        key: 'personTitleName',
        align: 'center',
        fixed: 'left',
        width: 200,
        render: personRowSpan(200),
    },.......
    
    
    
    const regionRowSpan = getRowSpanForJsf('regionName', reportList);
    const projectRowSpan = getRowSpanForJsf('projectName', reportList);
    const deptNameRowSpan = getRowSpanForJsf('deptName', reportList);
    const personRowSpan = getRowSpanForJsf('personTitleName', reportList);
    
    
    
    
    <div ref={tableRef}></div>
    <Table
      bordered
      loading={reportLoading}
      dataSource={reportList?.personDeptManagementReportInfos || []}
      columns={columns}
      pagination={false}
      key={_.uniqueId()}
      rowKey={'projectId'}
      className='myTable'
      scroll={{ x: 2000, y: tableScrollY }}
      indentSize={10}
      style={{ minHeight: 0 }}
    />
			

import React, { useEffect, useState, useRef } from "react";

export default function useTableScrollY() {
	const ref = useRef();
  const [height, setHeight] = useState(() => `calc(100vh - 0px)`);
  useEffect(() => {
    const { top } = ref.current.getBoundingClientRect();
    setHeight(`calc(100vh - ${top + 142}px)`);   // 142px 是表格的表头和上面固定的高度
  }, []);
  return [height, ref];
}