React使用antd对于复杂数据类型表的渲染

React使用antd对于复杂数据类型表的渲染

数据

 const table = [
      {
   
        firstType: '电器',
        results: [
          {
   
            secondType: '电视',
            list: [
              {
   
                name: '小米',
                number: 20,
                price: 800
              },
              {
   
                name: '长虹',
                number: 10,
                price: 500
              }
            ]
          },
          {
   
            secondType: '冰箱',
            list: [
              {
   
                name: '美的',
                number: 20,
                price: 1000
              },
              {
   
                name: '海尔',
                number: 10,
                price: 888
              }
            ]
          }
        ]
      },
      {
   
        firstType: '食物',
        results: [
          {
   
            secondType: '零食',
            list: [
              {
   
                name: '坚果',
                number: 50,
                price: 8
              },
              {
   
                name: '辣条',
                number: 80,
                price: 3
              }
            ]
          },
          {
   
            secondType: '生疏',
            list: [
              {
   
                name: '青菜',
                number: 100,
                price: 1
              }
            ]
          }
        ]
      }
    ]

方法1：表格行列合并

思路：将复杂的嵌套数据转换一条条的各自独立的数据，当其有相同的元素 对其合并

import React, {
    useState, useEffect } from 'react'
import {
    Table } from 'antd'

const spanTable = () => {