我可以循环多嵌套的对象集合,同时仍然在同一个表中显示吗?
<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>
发布于 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>
发布于 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>
发布于 2018-07-30 03:57:08
您所做的错误是将多个tbody
放在一个表中,将th
放在tbody
中而不是thead
中。
您可能正在寻找这样的东西:http://jsfiddle.net/eywraw8t/218109/您可以用嵌套表替换ul
和li
部件,但老实说,我不知道您希望如何使您的表具有可读性。
https://stackoverflow.com/questions/51583627
复制相似问题