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

Posted 2023-02-16

【中文标题】每个 v-for 循环有多个 <td> 元素

【英文标题】：Multiple <td> elements per v-for loop

【发布时间】：2018-02-06 04:40:16

【问题描述】：

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

以下代码有效，但这只是因为我手动编码<td>s。

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

【参考方案1】：

假设教师和学生数组总是长度相同，您可以遍历 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>

另一种方法是将重复的元素抽象为一个组件并使用special is attribute (<td is="details" v-for="..."></td>)。

【讨论】：

这太完美了！谢谢。