Vue.js与Vuetify多表数据垂直展示问题求助

你的问题出在同一个<tr>标签内循环<td>，导致所有Congé和Absence的条目都被渲染在同一行，形成横向排列。要改成垂直展示，需要把循环逻辑移到<tr>层级，让每个数据项单独占一行。

原问题代码 #

<v-simple-table >
  <thead>
    <tr>
      <th class="text-left">
        <v-card-subtitle><strong>Congé</strong></v-card-subtitle></th>
      <th class="text-left">
        <v-card-subtitle><strong>Absence</strong></v-card-subtitle></th>
    </tr>
  </thead>
  <tbody>
    <tr >
      <td v-for="conge in conges" :key="conge.id">
        {{ conge.dateDebut }}  à  {{ conge.dateFin}}
      </td>
      <td v-for="absence in absences" :key="absence.id">
        {{ absence.dateDebut }}  à  {{ absence.dateFin }}
      </td>
    </tr>
  </tbody>
</v-simple-table>

解决方案1：数据一一对应（适配长度不一致） #

如果Congé和Absence条目需要按行对应（比如第1条Congé对应第1条Absence），用索引循环<tr>，同时处理数组长度不一致的情况：

<v-simple-table>
  <thead>
    <tr>
      <th class="text-left">
        <v-card-subtitle><strong>Congé</strong></v-card-subtitle>
      </th>
      <th class="text-left">
        <v-card-subtitle><strong>Absence</strong></v-card-subtitle>
      </th>
    </tr>
  </thead>
  <tbody>
    <!-- 循环到两个数组中较长的长度，确保所有数据都显示 -->
    <tr v-for="(_, index) in Math.max(conges.length, absences.length)" :key="index">
      <td>
        <!-- 存在数据则显示，否则用占位符填充 -->
        {{ conges[index] ? `${conges[index].dateDebut} à ${conges[index].dateFin}` : '-' }}
      </td>
      <td>
        {{ absences[index] ? `${absences[index].dateDebut} à ${absences[index].dateFin}` : '-' }}
      </td>
    </tr>
  </tbody>
</v-simple-table>

解决方案2：数据独立展示（先列完Congé再列Absence） #

如果两个数据集不需要关联，想先展示所有Congé，再展示所有Absence，可拆分循环：

<v-simple-table>
  <thead>
    <tr>
      <th class="text-left">
        <v-card-subtitle><strong>Congé</strong></v-card-subtitle>
      </th>
      <th class="text-left">
        <v-card-subtitle><strong>Absence</strong></v-card-subtitle>
      </th>
    </tr>
  </thead>
  <tbody>
    <!-- 先渲染所有Congé条目 -->
    <tr v-for="conge in conges" :key="`conge-${conge.id}`">
      <td>{{ conge.dateDebut }} à {{ conge.dateFin}}</td>
      <td>-</td> <!-- Absence列空值占位 -->
    </tr>
    <!-- 再渲染所有Absence条目 -->
    <tr v-for="absence in absences" :key="`absence-${absence.id}`">
      <td>-</td> <!-- Congé列空值占位 -->
      <td>{{ absence.dateDebut }} à {{ absence.dateFin }}</td>
    </tr>
  </tbody>
</v-simple-table>

修改核心要点 #

• 将循环从<td>转移到<tr>，让每个数据项占据单独一行
• 根据数据关联需求选择对应循环逻辑，同时处理空值场景

内容的提问来源于stack exchange，提问作者Sharnalk