Сгруппировать строки в теле таблицы данных Vuetify - PullRequest
Новая
       7

Сгруппировать строки в теле таблицы данных Vuetify

1 голос
/ 06 мая 2020

В разделе body v-data-table, куда 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>

enter image description here

1 Ответ

0 голосов
/ 06 мая 2020

Вы можете опустить tbody из шаблона, так как v-data-table помещает tbody вокруг результатов уже при использовании 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>
...