Vue.js 将Vuetify数据表体中的行分组

Vue.js 将Vuetify数据表体中的行分组,vue.js,vuetify.js,Vue.js,Vuetify.js,在v-data-table的body部分中，Vuetify将项目放在其中，它将所有行包装在一个tbody标记中。我的插槽模板由多行组成，我需要对所有行进行分组，以便应用转换或其他效果 如何使v-data-table停止将主体包装在tbody标记中，从而产生嵌套的tbody标记 <v-data-table ref="dataTable" :headers="headers" fixed-header :height="height" :items=

  <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>

向上箭头
{{header.text}}
{{props.item.vendorCode}
内容
内容
内容
内容
内容
{{props.item.vendorName}
内容
内容
内容
内容
内容

tbody

v-slot:item

tbody

<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>

{{props.item.vendorCode}
内容
内容
内容
内容
内容
{{props.item.vendorName}
内容
内容
内容
内容
内容

tbody

v-slot:item

tbody

<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>

{{props.item.vendorCode}
内容
内容
内容
内容
内容
{{props.item.vendorName}
内容
内容
内容
内容
内容