react单元格合并,并且添加序号

本文介绍了一种处理后台返回的二维数组的方法,通过两次清洗过程实现数据格式转换,并加入了合并单元格的功能。具体步骤包括:首先将JSON字符串转换为对象,然后进行数据清洗,最后根据分页需求调整数据结构。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

接口返回的二维数组进行整理

案例:如果后台返回的数据格式是JSON.stringify()字符串类型的话,先对数据进行一次JSON.parse()对象的转换,把数据转换成自己想要的数组或者对象格式。
代码如下:如有优化的地方还请各位大佬多多指点

// 清洗数据
  const washDataFn = (data, pageSize) => { // pageSize 分页条数
    // 清洗第一遍数据
    const realData = [];
    let index = 0
    data.map((item, pIndex) => {
      item.data.map((cItem, cIndex) => {
        const newItem = {
          ...cItem,
          ...item,
          key: index,
          rowSpan: {}
        }
        delete newItem.data
        realData.push(newItem)
        index++
      })
    })

    // 清洗第二遍数据及合并单元格
    const totalRows = realData.length % pageSize ? (realData.length + pageSize) : realData.length
    for (let i = pageSize; i <= totalRows; i += pageSize) {
      const obj = {}
      realData.slice(i - pageSize, i).map((item, index) => {
      // 以下这些可以根据自己的实际情况去定义想要的属性值
        const key = `${item.ly_dept_name}${item.type}${item.totalNumber}${item.sum}${item.xtmc}${item.xtsybm}`
        const value = []
        if (obj[key]) {
          value.push(...obj[key], item.key)
        } else {
          value.push(item.key)
        }
        obj[key] = value
      })
      // 遍历对象的 key 值
      Object.keys(obj).map((k, i) => {
        obj[k].map((item, index) => {
        // 给第一项添加属性
          const rowSpan = 0 == index ? obj[k].length : 0
          realData[item].rowSpan = {
            number: rowSpan,
            ly_dept_name: rowSpan,
            totalNumber: rowSpan,
            sum: rowSpan,
            xtmc: rowSpan,
            xtsybm: rowSpan,
            type: rowSpan
          }
        })
      })
    }

    return realData
  }
handsonTable/react是基于React的库,它提供了一个用于显示和操作表格数据的React组件。在handsonTable中合并单元格通常需要使用到它的`mergedCells`属性,该属性可以接受一个对象数组,每个对象定义了要合并单元格的范围。 合并单元格的基本步骤如下: 1. 准备数据源,确保数据源中包含了将要合并单元格对应的数据。 2. 设置`mergedCells`属性,指定要合并单元格的起始列坐标以及结束列坐标。列坐标都是从0开始计数的。 3. 根据需要更新表格的其他相关属性和状态,如`colWidths`或`rowHeights`等,以适应合并后可能发生变化的列尺寸。 下面是一个简单的示例代码,展示如何在handsonTable/react合并A1到D2单元格: ```jsx import React from 'react'; import Handsontable from 'handsontable/react'; class MyTable extends React.Component { hotInstance: any; constructor(props) { super(props); this.state = { data: [ // ... 你的数据 ], mergedCells: [ { row: 0, col: 0, rowspan: 2, colspan: 4, }, ], }; } render() { return ( <Handsontable data={this.state.data} mergedCells={this.state.mergedCells} // 其他必要配置... /> ); } } export default MyTable; ``` 在上面的代码中,`mergedCells`属性定义了一个数组,其中包含了合并单元格的配置对象。对象中`row`和`col`指定了起始单元格和列索引,`rowspan`和`colspan`指定了合并数和列数。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小鸡岛~伍六七

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值