V-Data-Table 1.5 到 2.0

Question

我正在将 vuetify 更新到最新版本（之前是 1.5），我在尝试使用新道具和插槽调整 table 时遇到了问题。您可以在下方看到我的 table，它可以同时 select 多行和 select。我只需要纯粹复制我所拥有的，只复制到新版本，我不知道如何使用新插槽。

        <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

slots的使用好像和新版本没有太大区别

我能看到的唯一区别是道具：

之前：

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

现在：

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

对于复选框，您可以只使用道具 'show-select' 而不是插槽

V-Data-Table 1.5 到 2.0

V-Data-Table 1.5 to 2.0

vue.js

vuetify.js

v-data-table