react antd Table动态合并单元格

react antd Table动态合并单元格

1、实现效果图

2、实现方法

/**
  * 单元格合并处理
  * @param text 当前单元格的值
  * @param data 当前分页所有数据
  * @param key 当前列的dataIndex
  * @param index 当前数据所在下标
  * @returns {number} 待合并单元格数量
  */
  const mergeCells = (text :any, data:any, key:any, index:any)=> {
    // 上一行该列数据是否一样
    if (index !== 0 && text === data[index - 1][key]) {
      return 0
    }
    let rowSpan = 1
    // 判断下一行是否相等
    for (let i = index + 1; i < data.length; i++) {
      if (text !== data[i][key]) {
        break
      }
      rowSpan++
    }
    return rowSpan
  }

3、方法在渲染时的应用

const columns = [
{
      title: '报警ID',
      dataIndex: 'alarmId',
      key: 'alarmId',
      width: 120,
      ellipsis: true,
      sorter: (a: any, b: any) => a.alarmId - b.alarmId,//添加排序效果
      //value：当前行该单元格的值 record 当前行的值  index：当前行的行号
      render: (value:any, record:any, index:any) => {
        const obj = {
          children: value !== null ? value : '',
          props: {
            rowSpan: 1 
          }
        }
        obj.props.rowSpan = mergeCells(value, coilAlarmMsgs, 'alarmId', index)
        return obj
      }
    },
  ]