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

注意：可用插槽的完整列表here。

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

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

不要再使用内联样式了。您无法在不同的响应时间间隔上轻松覆盖它。此外，您应该尽量保持您的代码为DRY。