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