• 1. 首先要對(duì)后臺(tái)返回的表格數(shù)據(jù)排序，把需要合并的相同的字段排在一起。這一步一般后臺(tái)會(huì)處理好。
• 2. 在表格組件中創(chuàng)建一個(gè)temp對(duì)象，用來(lái)存放已經(jīng)合并的字段。
• 3. 新建一個(gè)方法mergecells，在方法遍歷數(shù)據(jù)，相同的字段累計(jì)加1，遍歷之后返回重復(fù)次數(shù)。
• 4. 在表格的columns數(shù)據(jù)中使用mergecells方法，詳情看下列代碼

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

class TableList extends Component {
  
  render () {
    const temp = {} // 當(dāng)前重復(fù)的值,支持多列
    /**
     * 動(dòng)態(tài)合并表格方法
     * @param {*} text 表格每列對(duì)應(yīng)的值
     * @param {*} data 后臺(tái)返回的展示數(shù)據(jù)數(shù)組, 數(shù)據(jù)需要按字段排序
     * @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: '序號(hào)',
        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