react使用antdesign中table组件时，如何实现单元格动态合并

1. 首先要对后台返回的表格数据排序，把需要合并的相同的字段排在一起。这一步一般后台会处理好。

2. 在表格组件中创建一个temp对象，用来存放已经合并的字段。

3. 新建一个方法mergecells，在方法遍历数据，相同的字段累计加1，遍历之后返回重复次数。

4. 在表格的columns数据中使用mergecells方法，详情看下列代码。

import React, { Component } from 'react'
import { Table, Icon } from 'antd'
import pagination from 'src/components/pagination'

class TableList extends Component {
  
  render () {
    const temp = {} // 当前重复的值,支持多列
    /**
     * 动态合并表格方法
     * @param {*} text 表格每列对应的值
     * @param {*} data 后台返回的展示数据数组, 数据需要按字段排序
     * @param {*} columns 表格每列表头字段
     */
    const mergeCells = (text, data, columns) => {
      let i = 0 
      if (text !== temp[columns]){
        temp[columns] = text
        data.forEach(((item) => {
          if (item[columns] === temp[columns]){
            i += 1
          }
        }))
      }
      return i
    }
    const renderContent = (value, row, index) => {
      const obj = {
        children: value,
        props: {},
      }
      return obj
    }
    const columns = [
      {
        title: '序号',
        dataIndex: 'serialNumber',
        render: renderContent,
      },
      {
        title: '渠道一',
        dataIndex: 'firstClassBrand',
        render: (value, row, index) => {
          const obj = {
            children: value,
            props: {},
          }
          obj.props.rowSpan = mergeCells(row.firstClassBrand, this.props.data, 'firstClassBrand')
          return obj
        },
      },
      {
        title: '渠道二',
        dataIndex: 'twoTierBrand',
        render: (value, row, index) => {
          const obj = {
            children: value,
            props: {}
          }
          obj.props.rowSpan = mergeCells(row.twoTierBrand, this.props.data, 'twoTierBrand')
          return obj
        },
      }
    ]
    return(
      <Table columns={columns} dataSource={this.props.data} pagination={pagination({ total: 100 })} bordered />
    )
  }
}

export default TableList