如何使用vue v-for循环从嵌套对象中生成合并行的表?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (1421)

我想要使​​用vue v-for循环将下面的嵌套Javascript数组生成到表(输出中显示的最终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>
提问于
用户回答回答于

代码:

<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>

扫码关注云+社区

领取腾讯云代金券