亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

通過迭代顯示嵌套的對象數(shù)組在HTML表格中
P粉638343995
P粉638343995 2024-04-05 14:11:42
[React討論組]

我有一個包含嵌套對象數(shù)組的以下input。

summary是父級對象數(shù)組,run_type是嵌套的對象數(shù)組。

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    |
------------------------------------

要靜態(tài)顯示這樣的表格,我可以這樣做

<table>
  <thead>
    <tr>
      <th>Vertical</th>
      <th>Environment</th>
      <th>RunType</th>
    </tr>
  </thead>
  <tbody>
  <tr>
    <td rowspan="2">Release</td>
    <td>6nc</td>
    <td>QA1</td>
  </tr>
  <tr>
    <td>3nc</td>
   <td>QA2</td>
  </tr>
  </tbody>
</table>

請問有人可以告訴我如何動態(tài)顯示這個表格嗎?我嘗試過這種方式,但是沒有成功。問題是我可以將Name列的rowspan設為2行,但是其他所有列都沒有被放置在同一Name部分的兩行中。

<table>
  <thead>
    <tr>
      <th>Vertical</th>
      <th>Environment</th>
      <th>RunType</th>
    </tr>
  </thead>
  <tbody>
     {input?.summary?.map((project, indx) => {
       return (
         <tr>
           <td rowspan="2">{project?.name}</td>
             {project?.run_type?.map((runType, indx) => {
                return (
                  <>
                    <td>{runType.environment}</td>
                    <td>{runType.type}</td>
                  </>
                );
             })}
         </tr>
       );
     })}
  </tbody>
</table>

P粉638343995
P粉638343995

全部回復(1)
P粉431220279

問題出在于您使用了一個單獨的<tr>元素來迭代run_type環(huán)境和類型。這會導致表格結構的渲染不正確。

以下是您可以修改代碼以實現(xiàn)此目的的方法:

<tbody>
    {input?.summary?.map((project, projectIndex) => (
      <>
        {project?.run_type?.map((runType, runTypeIndex) => (
          <tr key={`${projectIndex}-${runTypeIndex}`}>
            {runTypeIndex === 0 ? (
              <td rowspan={project.run_type.length}>{project.name}</td>
            ) : null}
            <td>{runType.environment}</td>
            <td>{runType.type}</td>
          </tr>
        ))}
      </>
    ))}
  </tbody>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關于我們 免責申明 意見反饋 講師合作 廣告合作 最新更新
php中文網:公益在線php培訓,幫助PHP學習者快速成長!
關注服務號 技術交流群
PHP中文網訂閱號
每天精選資源文章推送
PHP中文網APP
隨時隨地碎片化學習
PHP中文網抖音號
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號