如何使用vue v-for循环从嵌套对象生成包含合并行的表？开发者社区

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

文章/答案/技术大牛

发布

[{
"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>
        <td rowspan="6">School A</td>
        <td rowspan="3">Class A</td>
        <td>John</td>
        <td>Peter</td>
        <td>Andrew</td>
        <td rowspan="3">Class B</td>
        <td>Alice</td>
        <td>Ronald</td>
        <td>Katherine</td>
    </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 v-if="currentStudent == 0" :rowspan="rowspanClass[schoolClass.class_name]">{{schoolClass.class_name}}</td>
            <td>{{student.student_name}}</td>
        </template>
      </template>
      </tbody>
    </table>
</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() {

问 如何使用vue v-for循环从嵌套对象生成包含合并行的表？ EN

回答 1

Stack Overflow用户