react合并数组_react+antdTable实现表格数据合并import React, { uState, uEffect } from 'react'import { Table } from'antd'exportdefault props =>{
const [optRecords, tOptRecords]=uState([])
let position= 0 //表格合并的位置，哪⼀⾏需要展⽰
const optRecordsColums =[
{
dataIndex:'customer',
title:'客户名称',
render: (d, item, index)=>{
const obj={
children: d,
props: {rowSpan:0}
}if (index === 0) {
wLength
wLength
}if (index ===position) {微商如何做
wLength
position+=wLength
}returnobj
}
},
{
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'}
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',
{
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 = duce((acc, cur) =>{if (!acc[cur[key]]) {
acc[cur[key]]= 0}
acc[cur[key]]++
returnacc
}, {})//获取的结果{客户1: 2, 客户2: 1, 客户3: 3}圆柱公式
let obj: objProps ={}//给渲染数据增加合并⾏数
const newArr = data.map(item =>{
obj={...item}if(sunArr[item[key]]) {
}returnobj
})
tOptRecords(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)deleteobj.children
newArr.push(obj)
})
}
})
tOptRecords(newArr)
console.log(newArr)
}
uEffect(()=>{//数据1
//handleData('customer')
//数据2
handleData2()
}, [])return(
rowKey="id"pagination={fal}
bordered
columns={optRecordsColums}
results={optRecords}/>
)
萝卜哥
}
