在 table 中使用 v-for

Question

我有一个 table 填充了一些信息，我想像图片一样格式化 table

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

我希望只有一个设备类型的任何行都跨越整行。所有其他行应显示为正常 table 行。

我正在使用以下 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 周围使用容器，所有格式都会中断 down.Thanks...

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

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

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

Answer 1

您可以在 template 标记中移动 v-for，它不会在 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>

在 table 中使用 v-for

Using v-for in a table

templates

html-table

vue.js