在Vuetify数据表主体中对行进行分组

Question

在v-data-table的body部分中，Vuetify将项目放在其中，它将所有行包装在tbody标签中。我的广告位模板包含多行，这些行需要分组，以便可以应用转场或其他效果。

如何使v-data-table停止将主体包裹在tbody标签中，从而导致嵌套的tbody标签？

  <v-data-table
    ref="dataTable"
    :headers="headers"
    fixed-header
    :height="height"
    :items="invoices"
    item-key="id"
    :search="search"
    class="elevation-1"
    disable-pagination
    :loading="loading"
    loading-text="Loading invoices... please wait..."
    :no-data-text="this.noDataText"
    no-results-text="No invoices found for your search."
    :hide-default-footer="true"
  >
    <template v-slot:headers="props">
      <thead>
        <tr>
          <th
            v-for="header in props.headers"
            :key="header.text"
            ref="dataTableHdr"
            :class="['column sortable', pagination.descending ? 'desc' : 'asc', header.value === pagination.sortBy ? 'active' : '', header.class === '']"
            @click="changeSort(header.value)"
          >
            <v-icon small>arrow_upward</v-icon>
            {{ header.text }}
          </th>
        </tr>
      </thead>
    </template>

    <template v-slot:item="props">
      <tbody>
        <tr>
          <td>{{ props.item.vendorCode }}</td>
          <td>CONTENT</td>
          <td>CONTENT</td>
          <td>CONTENT</td>
          <td>CONTENT</td>
          <td>CONTENT</td>
        </tr>
        <tr>
          <td>{{ props.item.vendorName }}</td>
          <td>CONTENT</td>
          <td>CONTENT</td>
          <td>CONTENT</td>
          <td>CONTENT</td>
          <td>CONTENT</td>
        </tr>
      </tbody>
    </template>
  </v-data-table>

Answer 1

您可以从模板中省略tbody，因为使用tbody时，v-data-table已将v-slot:item放在结果周围。

<template v-slot:item="props">

    <tr>
      <td>{{ props.item.vendorCode }}</td>
      <td>CONTENT</td>
      <td>CONTENT</td>
      <td>CONTENT</td>
      <td>CONTENT</td>
      <td>CONTENT</td>
    </tr>
    <tr>
      <td>{{ props.item.vendorName }}</td>
      <td>CONTENT</td>
      <td>CONTENT</td>
      <td>CONTENT</td>
      <td>CONTENT</td>
      <td>CONTENT</td>
    </tr>

</template>