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

最新推荐文章于 2024-08-23 11:38:09 发布

原创最新推荐文章于 2024-08-23 11:38:09 发布 · 462 阅读

0 ·

CC 4.0 BY-SA版权

建松

文章标签：

#javascript

本文介绍了一种处理后台返回的二维数组的方法，通过两次清洗过程实现数据格式转换，并加入了合并单元格的功能。具体步骤包括：首先将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
  }