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

摘要:
效果如下其实这种情况也可以使用树形数据表格展示,但是表格合并展示,看起来更直观.反正产品说哪种展示就哪种展示吧我这里用到两种类型的后台数据,一种是一维数组数据,一种是有层级的二维数组.表格合并最后要用到的数据都是一维数据,所以需要对数据处理一下.这两种处理方式对data数据从后台接口获取也一样适用上代码,项目是react+typescript结合的,所以写的是.tsx文件table1.tsximp
效果如下
react + antd Table实现表格数据合并第1张

其实这种情况也可以使用树形数据表格展示,但是表格合并展示,看起来更直观.反正产品说哪种展示就哪种展示吧
我这里用到两种类型的后台数据,一种是一维数组数据,一种是有层级的二维数组.
表格合并最后要用到的数据都是一维数据,所以需要对数据处理一下.这两种处理方式对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
        }
        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'}
  ]

  //数据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]]++
      returnacc
    }, {})
    //获取的结果{客户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]]
      }
      returnobj
    })
    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)
          deleteobj.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}
    />
)
}

免责声明:文章转载自《react + antd Table实现表格数据合并》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇nm命令详解VBS 操作Excel的常用方法下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

【SQL server初级】数据库性能优化二:数据库表优化

数据库优化包含以下三部分,数据库自身的优化,数据库表优化,程序操作优化.此文为第二部分   数据库性能优化二:数据库表优化   优化①:设计规范化表,消除数据冗余   数据库范式是确保数据库结构合理,满足各种查询需要、避免数据库操作异常的数据库设计方式。满足范式要求的表,称为规范化表,范式产生于20世纪70年代初,一般表设计满足前三范式就可以,在这里简单...

Reactv16.8.6生命周期函数

组件生命周期函数 React 主动调用的方法,也可重写这些方法 生命周期图谱 当组件实例被创建并插入 DOM 中时,其生命周期调用顺序如下: constructor(props) 如果不需要初始化 state 或 不进行方法绑定,则不需要使用该方法 在组件挂载之前会先调用该方法,在实现构造函数时必须先调用super(props)方法,否则会出现BUG通常,...

MySql通过Data恢复数据库数据

公司的服务器开不了机,把硬盘装在其他机器上面,文件是没有丢失,可是数据库开不了了。上网查了下,用DATA恢复了数据。 1、先通过MYSQL目录下的my.ini配置文件找到 datadir的文件夹地址。data里面的文件就是数据库的信息,备份复制出来。 2、重新安装相同版本的mysql数据库,找到新安装的mysql数据库Data的地址,用之前备份的替换掉D...

[PLSQL]Oracle Advanced Queue (DBMS_AQ/DMBS_AQADM)

扯在前面 Oracle通过AQ (Oracle Streams Advanced Queuing)来提供“进程间” (或者跨会话 -- inter-session) 通信的功能。关于inter-session communication, 貌似DBMS_PIPE也可以做到,这个打算写另外一片水文来介绍,在此不表。 AQ 其实类似于一个message qu...

使用动态SQL处理table_name作为输入参数的存储过程(MySQL)

关于mysql如何创建和使用存储过程,参考笔记《MySQL存储过程和函数创建》以及官网:https://dev.mysql.com/doc/refman/5.7/en/create-procedure.html 本篇主要示例使用了输入参数的存储过程,并解决使用表名作为输入参数的问题,因为之前遇到过需要使用表名作为参数的存储过程,很难处理。 问题描述: 假设...

Oracle 性能优化 — 统计数据收集

ORACLE优化器的优化方式有两大类,即基于规则的优化方式(Rule-Based Optimization,简称为RBO)和基于代价的优化方式(Cost-Based Optimization,简称为CBO)。 A、 RBO方式:优化器在分析SQL语句时,更据数据库中表和索引等定义信息,遵循的是Oracle内部预定的一些规则。比如我们常见的:当一个wher...