react使用antd组件合并Table单元格

   

<Table
    columns={columns}
    dataSource={this.state.worktaskList}
    bordered
    size="middle"
    // scroll={{ y: 'calc(400px + 10%)' }}
    pagination={false}
 />

    const columns = [
      {
        title: '项目',
        dataIndex: 'projectname',
        width: '10%',
        render: (text, row, index) => {
          return {
            children: <div>{text}</div>,
            props: {
              rowSpan: row.projectnameRowSpan,//对应新的行名称
            },
          };
        },
      },
      {
        title: '单位',
        dataIndex: 'depname',
        editable: true,
      },
      {
        title: '月度目标',
        dataIndex: 'monthnum',
        editable: true,
        render: (text, record, index) => {//数据可编辑
          return <Input value={text} onChange={(e) => this.upMonthMark(e, index, record)} />
        },
      },
      {
        title: '日均目标',
        dataIndex: 'daynum',
        editable: true,
        render: (text, record, index) => {//数据可编辑
          return <Input value={text} onChange={(e) => this.upDayMark(e, index, record)} />
        },
      },

    ];

       初始化合并单元格，必须对应projectnameRowSpan行名称重新组合方法

this.rowSpan("projectname", nextProps.columns2List)

  //合并同一数据
  rowSpan = (key, worktaskList) => {
    if (worktaskList) {
      let _list = worktaskList;
      let _num = []; // 相同的数据先存储在一起
      let indexList = []; // 相同数据的下标数组

      for (let i = 0; i < _list.length; i++) {
        //  最后一条的 +1 时会为undefind 报错，所以需要给判断
        let downKey = _list[i + 1] ? _list[i + 1][key] : ''
        // 当与下一条数据不同时，添加当前数据到_num,并进行处理
        if (_list[i][key] != downKey) {
          _num.push(_list[i]);
          indexList.push(i); //获取相同的 下标

          // 遍历相同数据的数组
          for (let z = 0; z < _num.length; z++) {
            // 第一个设置需要合并的数值
            _list[indexList[0]][`${key}RowSpan`] = _num.length
            if (z != 0) {  //其他设置为0
              _list[indexList[z]][`${key}RowSpan`] = 0

            }
          }
          //  当与下一行不同时，切记清除数组，因为一列会有多个合并表格
          _num = []
          indexList = []
          continue;
        } else {
          //当与下一条数据不同时，添加当前数据到_num,不进行处理
          _num.push(_list[i]);
          indexList.push(i);
        }
      }
      // 重新渲染数据
      worktaskList = _list;
    }

  }

行数据可编辑方法，总数据编辑

//月
upMonthMark = (e, index, record) => {
    const { operatorinfo } = this.props;
    let { worktaskList } = this.state;
      worktaskList[index].monthnum = e.target.value;
      var depname = worktaskList[index].depname;
      let sum = 0;
      let ii = 0;
      for (var i = 0; i < worktaskList.length; i++) {
        if (worktaskList[i].projectname === record.projectname && worktaskList[i].depname != "总目标量") {
          sum += parseInt(worktaskList[i].monthnum);

        }
        if (worktaskList[i].projectname === record.projectname && worktaskList[i].depname === "总目标量") {
          ii = i;
        }
      }
      worktaskList[ii].monthnum = sum;
      this.setState({
        worktaskList
      })
  }
//日均数据
  upDayMark = (e, index, record) => {
    const { operatorinfo } = this.props;
    let { worktaskList } = this.state;
    worktaskList[index].daynum = e.target.value;
    var sum = 0;
    var ii = 0;
    for (var i = 0; i < worktaskList.length; i++) {
        if (worktaskList[i].projectname === record.projectname && worktaskList[i].depname != "总目标量") {
          sum += parseInt(worktaskList[i].daynum);

        }
        if (worktaskList[i].projectname === record.projectname && worktaskList[i].depname === "总目标量") {
          ii = i;
        }
      }
      worktaskList[ii].daynum = sum;
      this.setState({
        worktaskList
      })
  }

后台数据格式

let data = [
  {
    key: '1',
    projectname: '电动自行车',
    depname: 32,
    monthnum: 0,
    daynum: 0,
  },
  {
    key: '2',
    projectname: '电动自行车',
    monthnum: 0,
    daynum: 0,
    depname: 42,
  },
  {
    key: '3',
    projectname: '电动自行车',
    depname: "总目标量",
    monthnum: 0,
    daynum: 0,
  },
  {
    key: '4',
    projectname: 'Jim Red',
    depname: 18,
    monthnum: 0,
    daynum: 0,
  },
  {
    key: '5',
    projectname: 'Jake White',
    depname: 18,
    monthnum: 0,
    daynum: 0,
  },
];