Ich habe Folgendes input
, das ein Array verschachtelter Objekte enth?lt.
summary
是父級對象數(shù)組,run_type
ist ein verschachteltes Array von Objekten.
let input = { "summary": [ { "name": "Release", "run_type": [ { "environment": "6nc", "type": "QA1" }, { "environment": "3nc", "type": "QA2" } ] } ] }
Ich m?chte die Tabelle wie folgt anzeigen. Da jedes summary
有2個run_type
,所以Name
字段的rowspan
2 ist.
------------------------------------ Name | Environment | RunType | ------------------------------------ Release | 6nc | QA1 | | 3nc | QA2 | ------------------------------------
Um eine solche Tabelle statisch anzuzeigen, kann ich Folgendes tun
<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>
Kann mir jemand sagen, wie man diese Tabelle dynamisch anzeigt? Ich habe es auf diese Weise versucht, aber ohne Erfolg. Das Problem besteht darin, dass ich die Zeilenspanne der Namensspalte auf zwei Zeilen festlegen kann, alle anderen Spalten jedoch nicht in beiden Zeilen desselben Namensabschnitts platziert sind.
<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>
問題出在于您使用了一個單獨的<tr>
元素來迭代run_type
環(huán)境和類型。這會導致表格結(jié)構(gòu)的渲染不正確。
以下是您可以修改代碼以實現(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>