我有一個包含巢狀物件陣列的以下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 | ------------------------------------
要靜態顯示這樣的表格,我可以這樣做
<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>
請問有人可以告訴我如何動態顯示這個表格嗎?我嘗試過這種方式,但沒有成功。問題是我可以將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>
問題出在於您使用了一個單獨的
<tr>
元素來迭代run_type
環境和類型。這會導致表格結構的渲染不正確。以下是您可以修改程式碼以實現此目的的方法: