Vue, Vuetify 2, v-data-table - Как показать общее сырье внизу таблицы

Question

Я использую v-data-table (Vuetify 2.x) и хотел бы сделать следующее.

1. закрепить итоговую строку таблицы
2. сделать total always visible
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);
}

И больше не используйте встроенные стили. Вы не можете с легкостью отменить его на разных интервалах отклика. Кроме того, вы должны стремиться сохранить свой код как DRY, насколько это возможно.