Таблица V-данных от 1.5 до 2.0

Question

Я обновляю vuetify до последней версии (была 1.5 ранее), и у меня возникли проблемы с попыткой настроить свою таблицу с новыми реквизитами и слотами. Вы можете увидеть мою таблицу прямо ниже, в ней есть возможность выбрать несколько строк и выбрать все одновременно. Мне просто нужно полностью воспроизвести то, что у меня есть, только в новой версии, и я не знаю, как это сделать с новыми слотами.

        <div class="col-12">
            <v-data-table
              v-model="selected"
              :headers="headers"
              :items="queriedData"
              item-key="Id"
              select-all
              :pagination.sync="pagination"
              :total-items="queriedData.lenght"
              prev-icon="mdi-menu-left"
              next-icon="mdi-menu-right"
              sort-icon="mdi-menu-down"
            >
            <template v-slot:headers="props">
              <tr>
                <th v-if="canView">
                  <v-checkbox
                    :input-value="props.all"
                    :indeterminate="props.indeterminate"
                    primary
                    hide-details
                    color="white"
                    @click.stop="toggleAll"
                    class="table-checkbox-header"
                  ></v-checkbox>
                </th>
                <th width="30px">
                </th>
                <th width="30px">
                </th>
                <th
                  v-for="header in props.headers"
                  :key="header.text"
                  :class="['column sortable', pagination.descending ? 'desc' : 'asc', header.value === pagination.sortBy ? 'active' : '']"
                  @click="changeSort(header.value)"
                >
                  {{ header.text }}
                  <v-icon small>arrow_upward</v-icon>
                </th>
              </tr>
            </template>
            <template v-slot:no-data>
              <div class="text-center">
                {{NoInformation}}
              </div>
            </template>
            <template v-slot:items="props">
              <td v-if="canView">
                <v-checkbox
                  v-model="props.selected"
                  primary
                  color="primary"
                  hide-details
                  class="table-checkbox-body"
                ></v-checkbox>
              </td>
              <td style="display: inline-flex;" >
              <v-tooltip top color="primary" v-if="CanEdit">
                <template v-slot:activator="{ on }">
                <a v-on="on" class="btn-table-icon" @click.prevent="doSomething(props.item.Id)">
                  <i class="mdi mdi-eye icons-tables-margins"></i>
                </a>
                </template>
                <span>{{view}}</span>
              </v-tooltip>
              <v-tooltip top color="primary" v-if="CanEdit" >
                <template v-slot:activator="{ on }">
                <a v-on="on" class="btn-table-icon" @click.prevent="doSomething(props.item.Id)">
                  <i class="mdi mdi-square-edit-outline icons-tables-margins"></i>
                </a>
                </template>
                <span>{{view}}</span>
              </v-tooltip>
              </td>
              <td>
                <div v-if="props.item.Id!=0">
                  <span>Hello</span>
                </div>
                <div v-else>
                  <i class="mdi mdi-folder-lock-open"></i>
                </div>
              </td>
              <td>{{ props.item.Name}}</td>
              <td>{{ props.item.Name2}}</td>
              <td>{{ props.item.Name3}}</td>
              <td>{{ props.item.Name4}}</td>
              <td :style="'color:' + props.item.ColorName" >{{ props.item.Name5}}</td>
            </template>
          </v-data-table>
        </div>

Спасибо.

Answer 1

Использование слотов в новой версии не сильно отличается.

Единственное различие, которое я вижу, это свойства:

До:

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

Сейчас:

<template v-slot:headers="{props}">

А для флажков вы можете просто использовать опору 'show-select' вместо использования слотов