Vue：在表格中显示嵌套数据

问题描述：

我正在重写一些较旧的代码，并使用Vue作为替换。除了更改一个使用车把模板的表格之外，这一切都很顺利。Vue：在表格中显示嵌套数据

使用嵌套的句柄{{each}}我可以在表格行中显示相关数据的同时查看嵌套的数据结构：例如，使用把手：https://jsfiddle.net/6dsruo40/1/

我无法弄清楚如何使用Vue公司与v-for等

拨弄一样做玉米粥，因为我有：https://jsfiddle.net/cj7go6bv/

我不知道如何通过工作数据结构的同时保持<tr>就像在车把

这是我使用的数据结构，但它是灵活：

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, 
     } 
    ] 
    } 
] 
} 
];

的Vue公司的代码，我很谦虚到目前为止

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

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

而且模板：

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

在Vue公司的机制，就像是把手进行显示的表是什么？谢谢！

答

以下是更新模板的相关部分。

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

并更新了fiddle。

重点是利用template元素每次迭代渲染多个tr。

这太棒了@bert！很简单。 '

Vue：在表格中显示嵌套数据

相关推荐