Vuetify 数据 table 的行数未达到 table 的全高

Question

我正在尝试使用带有固定页眉和页脚的 v-data-table。但是我有一个问题，如果我为 table 定义的高度大于行的高度，则 table 会采用我定义的高度，并且页脚远离行。

这是一个codepen

有解决这个问题的聪明方法吗？

HTML

<div id="app">
  <v-app id="inspire">
    <div>
    <v-data-table
      height="300"
      v-model="selected"
      :headers="headers"
      fixed-header
      :items="desserts"
      item-key="name"
    >
    </v-data-table>
    </div>
  </v-app>
</div>

JS

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      singleSelect: false,
      selected: [],
      headers: [
        {
          text: 'Dessert (100g serving)',
          align: 'start',
          sortable: false,
          value: 'name',
        },
        { text: 'Calories', value: 'calories' },
        { text: 'Fat (g)', value: 'fat' },
        { text: 'Carbs (g)', value: 'carbs' },
        { text: 'Protein (g)', value: 'protein' },
        { text: 'Iron (%)', value: 'iron' },
      ],
      desserts: [
        {
          name: 'Frozen Yogurt',
          calories: 159,
          fat: 6.0,
          carbs: 24,
          protein: 4.0,
          iron: '1%',
        },
      ],
    }
  },
})

Answer 1

由于高度只会被感知为CSS，您可以尝试：

<div id="app">
  <v-app id="inspire">
    <div>
    <v-data-table
      height="auto"
      v-model="selected"
      :headers="headers"
      fixed-header
      :items="desserts"
      item-key="name"
    >
    </v-data-table>
    </div>
  </v-app>
</div>

Vuetify 数据 table 的行数未达到 table 的全高

Veutify data table with number of rows that doesn't make the full height of the table

javascript

css

vue.js

vuetify.js

vuetify-datatable