如何使用Vue.js在同一个表中嵌套多个循环
如何使用Vue.js在同一个表中嵌套多个循环
提问于 2018-07-30 03:06:07
我可以循环多嵌套的对象集合，同时仍然在同一个表中显示吗？
<table v-for="d in transaction.documents">
<tbody>
<tr>
<th>Document ID:</th>
<td>{{ d.id }}</td>
</tr>
</tbody>
<tbody v-for="t in d.tasks">
<tr>
<th>Task ID:</th>
<td>{{t.id}}</td>
</tr>
</tbody>
<tbody v-for="a in t.actions"> <!-- t is no longer available because it's not still in the same <tbody> -->
<tr>
<th>Action ID:</th>
<td>{{ a.id) }}</td>
</tr>
</tbody>
</table>我需要沿着这些路线做一些事情，但这是无效的HTML。
<table v-for="d in transaction.documents">
<tbody>
<tr>
<th>Document ID:</th>
<td>{{ d.id }}</td>
</tr>
</tbody>
<tbody v-for="t in d.tasks">
<tr>
<th>Task ID:</th>
<td>{{t.id}}</td>
</tr>
<tbody v-for="a in t.actions">
<tr>
<th>Action ID:</th>
<td>{{ a.id) }}</td>
</tr>
</tbody>
</tbody>
</table>回答 3
Stack Overflow用户
回答已采纳
发布于 2018-07-31 06:43:17
我想添加一个比我上面的评论更完整的答案。基本上，我可以想出两种策略来按照您想要的方式呈现数据。
首先，只要您的数据不在所需的结构中，或者不在易于处理的结构中，您始终可以使用从原始结构派生的计算属性来构建新的数据结构。这可能是最简单的方法。
例如，这里是一个计算属性，它将您的数据重新格式化为一个易于迭代的结构。
tables(){
const tables = []
for (const document of this.transaction.documents){
const rows = []
for (const task of document.tasks){
rows.push({header: "Task ID", id: task.id})
for (const action of task.actions){
rows.push({header: "Action ID", id: action.id})
}
}
tables.push({header: "Document ID", id: document.id, rows})
}
return tables
}这意味着您可以在模板中使用简单的循环来呈现数据。
<div id="app">
<table v-for="table in tables">
<tr><th>{{table.header}}</th><td>{{table.id}}</td><tr></tr>
<tr v-for="row in table.rows">
<th>{{row.header}}</th>
<td>{{row.id}}</td>
</tr>
</table>
</div>这是一个实际应用的例子。
console.clear()
new Vue({
el: "#app",
data:{
transaction: {
documents:[
{
id: 1,
tasks:[
{
id: 1,
actions:[
{id: 1},
{id: 2},
{id: 3}
]
},
{
id: 2,
actions:[
{id: 4}
]
}
]
}
]
}
},
computed:{
tables(){
const tables = []
for (const document of this.transaction.documents){
const rows = []
for (const task of document.tasks){
rows.push({header: "Task ID", id: task.id})
for (const action of task.actions){
rows.push({header: "Action ID", id: action.id})
}
}
tables.push({header: "Document ID", id: document.id, rows})
}
return tables
}
},
})th {
text-align: left;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app">
<table v-for="table in tables">
<tr><th>{{table.header}}</th><td>{{table.id}}</td><tr></tr>
<tr v-for="row in table.rows">
<th>{{row.header}}</th>
<td>{{row.id}}</td>
</tr>
</table>
</div>
其次，您可以使用呈现函数。渲染函数让你在决定如何渲染你的模板时拥有javascript的所有灵活性。这是我在上面的注释中想出的呈现函数。
methods:{
buildTable(h, document){
const rows = []
// build and add the document row
const documentRow = h("tr", [h("th", "Document ID"), h("td", document.id)])
rows.push(documentRow)
// build the task rows
for (const task of document.tasks){
const taskRow = h("tr", [h("th", "Task ID"), h("td", task.id)])
rows.push(taskRow)
//build the action rows
for (const action of task.actions){
const actionRow = h("tr", [h("th", "Action ID"), h("td", action.id)])
rows.push(actionRow)
}
}
return rows
}
},
render(h){
const tables = []
for (const document of this.transaction.documents)
tables.push(h("table", this.buildTable(h, document)))
return h("div", tables)
}这是一个实际应用的例子。
console.clear()
new Vue({
el: "#app",
data:{
transaction: {
documents:[
{
id: 1,
tasks:[
{
id: 1,
actions:[
{id: 1},
{id: 2},
{id: 3}
]
},
{
id: 2,
actions:[
{id: 4}
]
}
]
}
]
}
},
methods:{
buildTable(h, document){
const rows = []
// build and add the document row
const documentRow = h("tr", [h("th", "Document ID"), h("td", document.id)])
rows.push(documentRow)
// build the task rows
for (const task of document.tasks){
const taskRow = h("tr", [h("th", "Task ID"), h("td", task.id)])
rows.push(taskRow)
//build the action rows
for (const action of task.actions){
const actionRow = h("tr", [h("th", "Action ID"), h("td", action.id)])
rows.push(actionRow)
}
}
return rows
}
},
render(h){
const tables = []
for (const document of this.transaction.documents)
tables.push(h("table", this.buildTable(h, document)))
return h("div", tables)
}
})th {
text-align: left;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app"></div>
Stack Overflow用户
发布于 2019-08-14 17:34:47
您可以像下面这样使用嵌套v-for和<template>标记来实现此目的：
<table v-for="d in transaction.documents">
<tbody>
<tr>
<th>Document ID:</th>
<td>{{ d.id }}</td>
</tr>
</tbody>
<tbody v-for="t in d.tasks">
<tr>
<th>Task ID:</th>
<td>{{t.id}}</td>
</tr>
</tbody>
<template v-for="t in d.tasks"> <!-- This tag won't display but help you to nest two foreach -->
<tbody v-for="a in t.actions">
<tr>
<th>Action ID:</th>
<td>{{ a.id) }}</td>
</tr>
</tbody>
</template>
</table>Stack Overflow用户
发布于 2018-07-30 03:57:08
您所做的错误是将多个tbody放在一个表中，将th放在tbody中而不是thead中。
您可能正在寻找这样的东西：http://jsfiddle.net/eywraw8t/218109/您可以用嵌套表替换ul和li部件，但老实说，我不知道您希望如何使您的表具有可读性。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51583627
复制相关文章
相似问题