每个v-for循环中有多个<td>元素

特拉维斯

在我的Vue应用程序中,我正在遍历一系列学校。每所学校都有一个名称,一组教师人数(每个年级一个)和一组学生人数(每个年级一个)。

以下代码有效,但这仅是因为我正在<td>手动编码

new Vue({
  el: '#app',
  data: {
    schools: [
      { name: 'Lincoln',   teachers: [3, 4, 1], students: [55, 42, 39] },
      { name: 'Oak Grove', teachers: [1, 2, 1], students: [31, 36, 23] },
      { name: 'Fairview',  teachers: [1, 3, 2], students: [30, 26, 39] },
    ],
  },
});
thead th,
tbody td { text-align: center; }
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>

<table id="app" class="table">
  <thead>
    <tr>
      <th rowspan="2"></th>
      <th colspan="2">Grade K</th>
      <th colspan="2">Grade 1</th>
      <th colspan="2">Grade 2</th>
    </tr>
    <tr>
      <th>Teachers</th>
      <th>Students</th>
      <th>Teachers</th>
      <th>Students</th>
      <th>Teachers</th>
      <th>Students</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="school in schools">
      <th>{{ school.name }}</th>
      
      <td>{{ school.teachers[0] }}</td>
      <td>{{ school.students[0] }}</td>
      
      <td>{{ school.teachers[1] }}</td>
      <td>{{ school.students[1] }}</td>
      
      <td>{{ school.teachers[2] }}</td>
      <td>{{ school.students[2] }}</td>
    </tr>
  </tbody>
</table>

注意重复的行:

<td>{{ school.teachers[x] }}</td>
<td>{{ school.students[x] }}</td>

在这个简化的示例中,这不是太大的问题。但是在我的实际项目中,还有更多的列和子列。有没有办法做一个重复循环来显示<td>s?

我尝试了另一个v-for循环,但由于它位于<tr><td>并且<th>被允许。

伯特

假设教师和学生数组的长度始终相同,则可以遍历template标签。

<tr v-for="school in schools">
  <th>{{ school.name }}</th>
  <template v-for="(cnt, idx) in school.teachers.length">
    <td>{{ school.teachers[idx] }}</td>
    <td>{{ school.students[idx] }}</td>
  </template>
</tr>

例。

new Vue({
  el: '#app',
  data: {
    schools: [
      { name: 'Lincoln',   teachers: [2, 2, 2], students: [40, 40, 40] },
      { name: 'Oak Grove', teachers: [2, 2, 2], students: [40, 40, 40] },
      { name: 'Fairview',  teachers: [2, 2, 2], students: [40, 40, 40] },
    ],
  },
});
thead th,
tbody td { text-align: center; }
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>

<table id="app" class="table">
  <thead>
    <tr>
      <th rowspan="2"></th>
      <th colspan="2">Grade K</th>
      <th colspan="2">Grade 1</th>
      <th colspan="2">Grade 2</th>
    </tr>
    <tr>
      <th>Teachers</th>
      <th>Students</th>
      <th>Teachers</th>
      <th>Students</th>
      <th>Teachers</th>
      <th>Students</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="school in schools">
      <th>{{ school.name }}</th>
      <template v-for="(cnt, idx) in school.teachers.length">
        <td>{{ school.teachers[idx] }}</td>
        <td>{{ school.students[idx] }}</td>
      </template>
    </tr>
  </tbody>
</table>

执行此操作的另一种方法是将重复的元素抽象为组件并使用特殊is属性<td is="details" v-for="..."></td>)。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章