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