vue.js - V-Data-Table 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>

ありがとうございました。