如何使用vue v-for循环从嵌套对象生成包含合并行的表？
如何使用vue v-for循环从嵌套对象生成包含合并行的表？
提问于 2018-05-27 16:38:16
我有以下嵌套的Javascript数组，我希望使用vue v-for循环将其生成到一个表中(输出中显示了最终的html )。最好的方法是什么？我尝试过嵌套的v-for循环，但结果是错误的。
输入：
[{
"school_name": "Test School A",
"classes": [{
"class_name": "Class A",
"students": [
{ "student_name": "John", "grade" : "A"}
{ "student_name": "Andrew", "grade" : "B"}
{ "student_name": "Peter", "grade" : "C"}
]
},{
"class_name": "Class B",
"students": [
{ "student_name": "Alice", "grade" : "C"}
{ "student_name": "Ronald", "grade" : "A"}
{ "student_name": "Katherine", "grade" : "B"}
]
}]},{
"school_name": "Test School B",
"classes": [{
"class_name": "Class C",
"students": [
{ "student_name": "John", "grade" : "B"}
{ "student_name": "Ronald", "grade" : "B"}
{ "student_name": "Jacob", "grade" : "B"}
]
},{
"class_name": "Class D",
"students": [
{ "student_name": "Maia", "grade" : "C"}
{ "student_name": "Narine", "grade" : "C"}
{ "student_name": "Olivia", "grade" : "A"}
]
}]}]输出
<table>
<tbody>
<tr>
<td rowspan="6">School A</td>
<td rowspan="3">Class A</td>
<td>John</td>
</tr>
<tr>
<td>Peter</td>
</tr>
<tr>
<td>Andrew</td>
</tr>
<tr>
<td rowspan="3">Class B</td>
<td>Alice</td>
</tr>
<tr>
<td>Ronald</td>
</tr>
<tr>
<td>Katherine</td>
</tr>
</tbody>
</table>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50550416
复制相关文章
相似问题