我有一个包含嵌套对象数组的以下input。

summary是父级对象数组，run_type是嵌套的对象数组。

let input = {
      "summary": [
          {
              "name": "Release",
              "run_type": [
                {
                  "environment": "6nc",
                  "type": "QA1"
                },
                {
                  "environment": "3nc",
                  "type": "QA2"
                }
              ]
          }
      ]
  }

我想要显示如下表格。由于每个summary有2个run_type，所以Name字段的rowspan为2。

------------------------------------
   Name    | Environment | RunType |
------------------------------------
  Release  |     6nc     |  QA1    |
           |     3nc     |  QA2    |
------------------------------------

要静态显示这样的表格，我可以这样做

  

    

      
Vertical
      
Environment
      
RunType
    
  
  

  

    
Release
    
6nc
    
QA1
  
  

    
3nc
   
QA2
  
  

请问有人可以告诉我如何动态显示这个表格吗？我尝试过这种方式，但是没有成功。问题是我可以将Name列的rowspan设为2行，但是其他所有列都没有被放置在同一Name部分的两行中。

     {input?.summary?.map((project, indx) => {
       return (
         
             {project?.run_type?.map((runType, indx) => {
                return (
                  <>
                    
                  
                );
             })}
         
       );
     })}
  

  

    

      
Vertical
      
Environment
      
RunType
    
  
  

           
{project?.name}
{runType.environment}
                    
{runType.type}