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

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

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

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

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

 1 import React, { Component } from 'react'
 2 import { Table, Icon } from 'antd'
 3 import pagination from 'src/components/pagination'
 4 
 5 class TableList extends Component {
 6   
 7   render () {
 8     const temp = {} // 当前重复的值,支持多列
 9     /**
10      * 动态合并表格方法
11      * @param {*} text 表格每列对应的值
12      * @param {*} data 后台返回的展示数据数组, 数据需要按字段排序
13      * @param {*} columns 表格每列表头字段
14      */
15     const mergeCells = (text, data, columns) => {
16       let i = 0 
17       if (text !== temp[columns]){
18         temp[columns] = text
19         data.forEach(((item) => {
20           if (item[columns] === temp[columns]){
21             i += 1
22           }
23         }))
24       }
25       return i
26     }
27     const renderContent = (value, row, index) => {
28       const obj = {
29         children: value,
30         props: {},
31       }
32       return obj
33     }
34     const columns = [
35       {
36         title: '序号',
37         dataIndex: 'serialNumber',
38         render: renderContent,
39       },
40       {
41         title: '渠道一',
42         dataIndex: 'firstClassBrand',
43         render: (value, row, index) => {
44           const obj = {
45             children: value,
46             props: {},
47           }
48           obj.props.rowSpan = mergeCells(row.firstClassBrand, this.props.data, 'firstClassBrand')
49           return obj
50         },
51       },
52       {
53         title: '渠道二',
54         dataIndex: 'twoTierBrand',
55         render: (value, row, index) => {
56           const obj = {
57             children: value,
58             props: {}
59           }
60           obj.props.rowSpan = mergeCells(row.twoTierBrand, this.props.data, 'twoTierBrand')
61           return obj
62         },
63       }
64     ]
65     return(
66       <Table columns={columns} dataSource={this.props.data} pagination={pagination({ total: 100 })} bordered />
67     )
68   }
69 }
70 
71 export default TableList