react + antd Table实现表格数据合并

效果如下

 

其实这种情况也可以使用树形数据表格展示,但是表格合并展示,看起来更直观.反正产品说哪种展示就哪种展示吧

 

我这里用到两种类型的后台数据,一种是一维数组数据,一种是有层级的二维数组.

表格合并最后要用到的数据都是一维数据,所以需要对数据处理一下.这两种处理方式对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}
    />
  )
}