在表格中使用 v-for

Question

我有一张表格，里面有一些信息，我想像图片一样格式化表格

不幸的是，我无法控制的 excel 表的格式如下：

我希望任何只有 Equipment 类型的行跨越整行。所有其他行应显示为正常的表格行。

我正在使用以下 vue 模板：

<table>
    <caption>
      SHS Scrap Table
    </caption>
    <thead>
      <tr>
        <th>Make</th>
        <th>Model #</th>
        <th>Bar Code</th>
        <th>Serial #</th>
        <th>Location</th>
        <th>Condition</th>
      </tr>
    </thead>
    <tbody v-for="item in scrapDataEmptyRowsRemoved" :key="item">
      <tr v-if="item['Equipment Type']">
        <td class="equipt-type" colspan="6">
          Equipment Type - {{ item["Equipment Type"] }}
        </td>
      </tr>
      <tr v-else>
        <td>{{ item["Make"] }}</td>
        <td>{{ item["Model #"] }}</td>
        <td>{{ item["Bar Code"] }}</td>
        <td>{{ item["Serial #"] }}</td>
        <td>{{ item["Location"] }}</td>
        <td>{{ item["Condition"] }}</td>
      </tr>
    </tbody>
  </table>

唯一的问题是在 Devtools 中我看到每一行都有一个语义不正确的 Tbody。关于如何纠正这个问题的任何想法。如果我在 v-if v-else 周围使用容器，所有格式都会崩溃。谢谢...

更新唯一的问题是 Vite 反对将 :key 属性移动到 v-else：

我不知道他们想要什么其他唯一键。

更新 II - 显然，如果我使用不同的对象键 Vite 可以，即：key="item['Equipment Type'] 和 v-else :key="item['Make']。这看起来对吗？

Answer 1

您可以将v-for 移动到template 标记中，该标记不会在DOM 中呈现。

<tbody>
  <template  v-for="item in scrapDataEmptyRowsRemoved" :key="item">
    <tr v-if="item['Equipment Type']">
      <td class="equipt-type" colspan="6">
        Equipment Type - {{ item["Equipment Type"] }}
      </td>
    </tr>
    <tr v-else>
      <td>{{ item["Make"] }}</td>
      <td>{{ item["Model #"] }}</td>
      <td>{{ item["Bar Code"] }}</td>
      <td>{{ item["Serial #"] }}</td>
      <td>{{ item["Location"] }}</td>
      <td>{{ item["Condition"] }}</td>
    </tr>
  </template>
</tbody>