- 首先要对后台返回的表格数据排序，把需要合并的相同的字段排在一起。这一步一般后台会处理好。
- 在表格组件中创建一个temp对象，用来存放已经合并的字段。
- 新建一个方法mergecells，在方法遍历数据，相同的字段累计加1，遍历之后返回重复次数。
- 在表格的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
