Vue: Affichage des données imbriquées dans un tableau

Question

Je suis en train de réécrire du code plus ancien et d'utiliser Vue comme remplacement. Tout va bien, à part changer une table qui est modelée en utilisant un guidon. Utilisation de guidons imbriqués {{each}} Je peux travailler à travers la structure de données imbriquée tout en affichant les données pertinentes dans les lignes de table: par ex. guidon à l'aide: https://jsfiddle.net/6dsruo40/1/

Je ne peux pas comprendre comment faire la même chose en utilisant Vue avec v-for etc.

Fiddle avec comme bouillie de maïs que j'ai: https://jsfiddle.net/cj7go6bv/

Je ne sais pas comment travailler à travers le structure de données tout en maintenant les <tr> s comme dans le guidon

Ceci est la structure de données que je utilise, mais il est flexible:

var data = [ 
    { 
key: "Region 1", 
values: [ 
    { 
    key: "Sub region 1", 
    values: [ 
     { 
     site: "Site A", 
     timestamp: 1507246300935, 
     total: 3, 
     }, 
     { 
     site: "Site B", 
     timestamp: 1507246300818, 
     total: 0, 
     }, 
     { 
     site: "Site C", 
     timestamp: 1507246300936, 
     total: 0, 
     } 
    ], 
    }, 
    { 
    key: "Sub region 2", 
    values: [ 
     { 
     site: "Site A", 
     timestamp: 1507246301442, 
     total: 20, 
     }, 
     { 
     site: "Site B", 
     timestamp: 1507246301788, 
     total: 5, 
     } 
    ] 
    }, 
    { 
    key: "Sub region 3", 
    values: [ 
     { 
     site: "Site A", 
     timestamp: 1507246302503, 
     total: 66, 
     }, 
     { 
     site: "Site B", 
     timestamp: 1507246302783, 
     total: 2 
     } 
    ] 
    } 
] 
    }, 
    { 
key: "Region 2", 
values: [ 
    { 
    key: "Sub region 1", 
    values: [ 
     { 
     site: "Site A", 
     timestamp: 1507246306789, 
     total: 0, 
     }, 
     { 
     site: "Site B", 
     timestamp: 1507246307439, 
     total: 6, 
     } 
    ] 
    }, 
    { 
    key: "Sub region 2", 
    values: [ 
     { 
     site: "Site A", 
     timestamp: 1507246308269, 
     total: 10, 
     }, 
     { 
     site: "Site B", 
     timestamp: 1507246308683, 
     total: 30, 
     } 
    ] 
    } 
] 
} 
]; 

Le code Vue que j'ai est très modeste jusqu'à présent

Vue.component('project-table', { 
    template: '#table-template', 
    props: { 
    data: Array 
    } 
}); 

var app = new Vue({ 
    el: '#table-container', 
    data: {data: sites}, 
    }); 

Et le modèle:

<div id="table-container"> 
    <project-table :data="data"></project-table> 
</div> 
    <script id="table-template" type="text/x-template"> 
     <table class="u-full-width"> 
      <thead> 
       <tr> 
       <th>Project location</th> 
       <th>Total</th> 
       <th>Timestamp</th> 
      </tr> 
     </thead> 
     <tbody> 
     <tr class="name-row" v-for="item in data"> 
      <th class="name" colspan="3">{{item.key}}</th> 
     </tr> 
     <tbody> 
    </table> 
</script> 

Quel est le mécanisme d'affichage Vue d'une table comme cela se fait dans Guidons? Merci!

Answer 1

Voici la partie pertinente du modèle mise à jour.

<tbody> 
    <template v-for="item in data"> 
    <tr class="name-row" > 
     <th class="name" colspan="3">{{item.key}}</th> 
    </tr> 
    <template v-for="subregion in item.values"> 
     <tr> 
     <th class="group-name" colspan="4">{{subregion.key}}</th> 
     </tr> 
     <tr v-for="site in subregion.values"> 
     <td>{{site.site}}</td> 
     <td>{{site.total}}</td> 
     <td> 
      <span>{{site.timestamp}}</span> 
     </td> 
     </tr> 
    </template> 
    </template> 
<tbody> 

Et la mise à jour fiddle.

Le point principal est de tirer parti de l'élément template pour afficher plus d'un tr par itération.