J'ai ce qui suit input
contenant un tableau d'objets imbriqués.
summary
是父级对象数组,run_type
est un tableau imbriqué d'objets.
let input = { "summary": [ { "name": "Release", "run_type": [ { "environment": "6nc", "type": "QA1" }, { "environment": "3nc", "type": "QA2" } ] } ] }
Je souhaite afficher le tableau comme ci-dessous. Puisque chaque summary
有2个run_type
,所以Name
字段的rowspan
vaut 2.
------------------------------------ Name | Environment | RunType | ------------------------------------ Release | 6nc | QA1 | | 3nc | QA2 | ------------------------------------
Pour afficher un tableau comme celui-ci de manière statique, je peux faire ceci
<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>
Quelqu'un peut-il me dire comment afficher dynamiquement ce tableau ? J'ai essayé de cette façon mais sans succès. Le problème est que je peux définir l'étendue des lignes de la colonne Nom sur 2 lignes, mais toutes les autres colonnes ne sont pas placées dans les deux lignes de la même section Nom.
<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>
Le problème est que vous utilisez un
<tr>
元素来迭代run_type
environnement et un type distincts. Cela entraîne un rendu incorrect de la structure de la table.Voici comment modifier votre code pour y parvenir :