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

对于复选框，你可以只使用道具"显示选择"，而不是使用插槽