Как создать таблицу с объединенными строками из вложенного объекта, используя циклы vue v-for?

Question

У меня есть следующий вложенный массив Javascript, который я хочу сгенерировать в таблицу (конечный html показан в выходных данных), используя циклы vue v-for.Какой лучший способ пойти?Я пробовал вложенные циклы 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>

Answer 1

Я не смог бы сделать ни лучше, ни динамичнее, но он будет работать как раз для ваших нужд.

<template>
  <div id="app">
    <table border="1" style="border-collapse: collapse">
      <tbody>
      <template v-for="(school, currentSchool) in data">
        <template v-for="(schoolClass, currentClass) in school.classes">
          <tr v-for="(student, currentStudent) in schoolClass.students">
            <td v-if="currentStudent+currentClass == 0" :rowspan="rowspanSchool[school.school_name]">
              {{school.school_name}}
            </td>
            <td v-if="currentStudent == 0" :rowspan="rowspanClass[schoolClass.class_name]">{{schoolClass.class_name}}</td>
            <td>{{student.student_name}}</td>
          </tr>
        </template>
      </template>
      </tbody>
    </table>
  </div>
</template>

<script>
  export default {
    name: 'app',
    computed: {
      rowspanSchool() {
        let schoolSpans = {};
        for (let school in this.data) {
          let total = 0;
          for (let schoolClass in this.data[school].classes) {
            for (let student in this.data[school].classes[schoolClass].students) {
              total++;
            }
          }
          schoolSpans[this.data[school].school_name] = total;
        }
        return schoolSpans
      },
      rowspanClass() {
        let classSpans = {};
        for (let school in this.data) {
          for (let schoolClass in this.data[school].classes) {
            let total = 0;
            for (let student in this.data[school].classes[schoolClass].students) {
              total++;
            }
            classSpans[this.data[school].classes[schoolClass].class_name] = total;
          }
        }
        return classSpans
      }
    },
    data() {
      return {
        data: arrayData
      }
    }
}
</script>