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

最新推荐文章于 2025-04-14 16:37:02 发布

原创

最新推荐文章于 2025-04-14 16:37:02 发布 · 1.6k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #java

本文探讨了在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 = ()

最低0.47元/天解锁文章