vue.js - tbody 中具有多行的表的 Vue 转换组

Question

使用下面的代码，我可以获得有效的 HTML，一个包含多个 tbody 标记的表格，每个标记有两行。

<template v-slot:body="{ items }">
  <tbody is="transition-group" name="invoice" v-for="(item, index) in items" :key="item.id">
    <tr key="row1">
      <td
        :rowspan="updateRowCount(item.invoiceSections)"
        valign="top"
        class="pt-3 text-left font-weight-medium"
      >{{ item.vendorCode }}</td>
      <td>CONTENT</td>
      <td>CONTENT</td>
      <td>CONTENT</td>
      <td>CONTENT</td>
      <td>
        <v-btn @click="items.splice(index,1)" class="mx-2" v-blur fab small>
          <v-icon color="red">mdi-cancel</v-icon>
        </v-btn>
      </td>
    </tr>
    <tr key="row2">
      <td>{{ item.vendorName }}</td>
      <td>CONTENT</td>
      <td>CONTENT</td>
      <td>CONTENT</td>
      <td>CONTENT</td>
      <td>CONTENT</td>
    </tr>
  </tbody>
</template>

所有看起来都按预期格式化。问题是过渡永远不会运行。tbody 应该以黄色突出显示，然后在单击我的删除按钮时淡出。

<style scoped>
.invoice-leave-active,
.invoice-leave-active tr:hover {
  background-color: yellow !important;
}
.invoice-enter-active,
.invoice-leave-active {
  transition: opacity 1s;
}
.invoice-enter,
.invoice-leave-to {
  opacity: 0;
}
</style>

我查看了数百个帖子，几乎所有帖子都只处理 tbody 内的一个表格行。就转换而言，有没有办法将两行视为一个对象？

标签： vue.jsvuejs2