javascript - 验证数据表的行数未达到表的全高

Question

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

这是一个代码笔

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

的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>