Vue，Vuetify 2，v-data-table-如何在表的底部显示总原始数据

Question

我正在使用v-data-table(Vuetify 2.x(，并希望执行以下操作。

1. 固定表格的总行
2. 使总数始终可见
3. 将总行的宽度调整为与页眉相同

我试图对上述项目进行编码，但没有成功。对于#3，我编码为使用v-slot:footer，但我无法调整总行的。这是代码。

<div id="app">
<v-app>
<v-data-table
:headers="headers"
:items="desserts"
:sort-by="['calories', 'fat']"
:sort-desc="[false, true]"
multi-sort
class="elevation-1"
:height="300"
>
<template v-slot:footer>
<tr>
<td style="font-weight:bold">total</td>
<td style="font-weight:bold">{{ total.calories }}</td>
<td style="font-weight:bold">{{ total.fat }}</td>
</tr>
</template>
</v-data-table>
</v-app>
</div>

new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
headers: [
{
text: 'Dessert (100g serving)',
align: 'start',
sortable: false,
value: 'name',
},
{ text: 'Calories', value: 'calories' },
{ text: 'Fat (g)', value: 'fat' },
],
desserts: [
{
name: 'Frozen Yogurt',
calories: 200,
fat: 6.0,
},
{
name: 'Ice cream sandwich',
calories: 200,
fat: 9.0,
},
{
name: 'Eclair',
calories: 300,
fat: 16.0,
},
{
name: 'Cupcake',
calories: 300,
fat: 3.7,
},
{
name: 'Gingerbread',
calories: 400,
fat: 16.0,
},
{
name: 'Jelly bean',
calories: 400,
fat: 0.0,
},
{
name: 'Lollipop',
calories: 400,
fat: 0.2,
},
{
name: 'Honeycomb',
calories: 400,
fat: 3.2,
},
{
name: 'Donut',
calories: 500,
fat: 25.0,
},
{
name: 'KitKat',
calories: 500,
fat: 26.0,
},
],
total: {
calories: 3600,
fat: 105.1,
},
}
},
})

https://codepen.io/UKanamo/pen/GRpyOEP

当我使用<template v-slot:body.append>时，我无法使总数始终可见(#2(。

如何对以上项目进行编码？

Answer 1

footer插槽不是实际<table>的一部分。使用body-append插槽添加额外一行：

<template v-slot:body.append>
<tr class="sticky-table-footer">
<td v-text="'Total'" />
<td v-text="total.calories" />
<td v-text="total.fat" />
</tr>
</template>

https://codepen.io/andrei-gheorghiu/pen/KKdZrYg

注意：此处提供可用插槽的完整列表。

要使您的页脚具有粘性，请添加以下CSS:

.sticky-table-footer td {
font-weight: bold;
position: sticky;
bottom: 0;
background-color: white;
border-top: thin solid rgba(0,0,0,.12);
}

并且不再使用内联样式。您无法在不同的响应时间间隔轻松覆盖它。此外，您应该努力保持您的代码尽可能干燥。