react + antd Table實現表格數據合並

githup代碼地址 https://github.com/shengbid/antprov5/tree/master/src/pages/spanTable

 

效果如下

 

其實這種情況也可以使用樹形數據表格展示,但是表格合並展示,看起來更直觀.反正產品說哪種展示就哪種展示吧

 

我這里用到兩種類型的后台數據,一種是一維數組數據,一種是有層級的二維數組.

表格合並最后要用到的數據都是一維數據,所以需要對數據處理一下.這兩種處理方式對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}
    />
  )
}