Vue:在表中显示嵌套数据 [英] Vue: Displaying nested data in a table
问题描述
我正在重写一些较旧的代码，并使用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>
和更新的小提琴.
要点是利用template元素在每次迭代中渲染多个tr.
I'm in the process of rewriting some older code, and using Vue as the replacement. It's all going great apart from changing one table that is templated using handlebars.
Using handlebars nested {{each}} I can work down through the nested data structure while displaying the relevant data in table rows: e.g. using handlebars: https://jsfiddle.net/6dsruo40/1/
I cant figure out how to do the same using Vue with v-for etc.
Fiddle with as mush as I have: https://jsfiddle.net/cj7go6bv/
I don't know how to work through the data structure while maintaining the <tr>s like in handlebars
This is the data structure I'm using, but it is 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,
}
]
}
]
}
];
The Vue code I have is very modest so far:
Vue.component('project-table', {
template: '#table-template',
props: {
data: Array
}
});
var app = new Vue({
el: '#table-container',
data: {data: sites},
});
And the template:
<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>
What is the mechanism in Vue for displaying a table like is done in Handlebars? Thanks!
Here is the relevant part of the template updated.
<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>
And the updated fiddle.
The main point is taking advantage of the template element to render more than one tr per iteration.
这篇关于Vue:在表中显示嵌套数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
