react + antd Table实现表格数据合并
效果如下
![](https://img2020.cnblogs.com/blog/1349812/202007/1349812-20200715170944785-764301949.png)
其实这种情况也可以使用树形数据表格展示,但是表格合并展示,看起来更直观.反正产品说哪种展示就哪种展示吧
我这里用到两种类型的后台数据,一种是一维数组数据,一种是有层级的二维数组.
表格合并最后要用到的数据都是一维数据,所以需要对数据处理一下.这两种处理方式对data数据从后台接口获取也一样适用
上代码,项目是react+typescript结合的,所以写的是.tsx文件
table1.tsx
import React, { useState, useEffect } from 'react' import { Table } from 'antd' export default props => { const [optRecords, setOptRecords] = useState([]) let position = 0 // 表格合并的位置,哪一行需要展示 const optRecordsColums = [ { dataIndex: 'customer', title: '客户名称', render: (d, item, index) => { const obj = { children: d, props: {rowSpan: 0} } if (index === 0) { obj.props.rowSpan = item.rowLength position = item.rowLength } if (index === position) { obj.props.rowSpan = item.rowLength position += item.rowLength } return obj } }, { dataIndex: 'relation', title: '业务' }, { dataIndex: 'amount', title: '金额' }, { dataIndex: 'time', title: '时间' } ] // 数据1 const data = [ { id: 1, customer: '客户1', relation: '业务1', amount: '10000', time: '2020-1-1' }, { id: 2, customer: '客户1', relation: '业务2', amount: '20000', time: '2020-2-2' }, { id: 3, customer: '客户2', relation: '业务2', amount: '30000', time: '2020-2-2' }, { id: 4, customer: '客户3', relation: '业务1', amount: '30000', time: '2020-2-2' }, { id: 5, customer: '客户3', relation: '业务2', amount: '30000', time: '2020-2-2' }, { id: 6, customer: '客户3', relation: '业务3', amount: '30000', time: '2020-2-2' } ] // 数据2 const data2 = [ { customerid: 1, customer: '客户1', children: [ { id: 1, relation: '业务1', amount: '10000', time: '2020-1-1', }, { id: 2, relation: '业务2', amount: '20000', time: '2020-2-2' } ] }, { customerid: 2, customer: '客户2', children: [ { id: 3, relation: '业务2', amount: '330000', time: '2020-1-1', } ] }, { customerid: 4, customer: '客户3', children: [ { id: 4, relation: '业务1', amount: '10000', time: '2020-1-1', }, { id: 5, relation: '业务2', amount: '20000', time: '2020-2-2' }, { id: 6, relation: '业务3', amount: '20000', time: '2020-2-2' } ] } ] interface objProps { [propName: string]: any } // 数据1处理,key: 需要对哪一个属性进行合并,这里的值和column里面的dataIndex一致 const handleData = (key) => { // 获取到合并数据的重复数量 const sunArr = data.reduce((acc, cur) => { if (!acc[cur[key]]) { acc[cur[key]] = 0 } acc[cur[key]]++ return acc }, {}) // 获取的结果{客户1: 2, 客户2: 1, 客户3: 3} let obj: objProps = {} // 给渲染数据增加合并行数 const newArr = data.map(item => { obj = {...item} if (sunArr[item[key]]) { obj.rowLength = sunArr[item[key]] } return obj }) setOptRecords(newArr) // console.log(sunArr, newArr) } // 数据2处理 const handleData2 = () => { let newArr = [] data2.map(item => { if (item.children) { item.children.forEach((subItem, i) => { let obj: objProps = {...item} Object.assign(obj, subItem) delete obj.children obj.rowLength = item.children.length newArr.push(obj) }) } }) setOptRecords(newArr) console.log(newArr) } useEffect(() => { // 数据1 // handleData('customer') // 数据2 handleData2() }, []) return ( <Table rowKey="id" pagination={false} bordered columns={optRecordsColums} results={optRecords} /> ) }