如何使Vue数据表垂直跨越所有可用空间

Question

是否有可能使v-data-table垂直跨越所有可用空间，并且分页条会像“所需布局”快照那样粘在底部

Here is my codepen where commented html shows what I've tried already

<div id="app">
              <v-data-table 
                            :items='alarms' 
                            :headers="headers"
                            class="elevation-1"
                            fill-height>
                <template slot="items" slot-scope="props">
                  <td>{{ props.item.fridgeDisplayName }}</td>
                  <td>{{ props.item.state }}</td>
                  <td>{{ props.item.task }}</td>
                </template>
              </v-data-table>
</div>

Answer 1

在官方文档中没有做到这一点的方法，但是您可以使用CSS通过添加以下规则来做到这一点：

.theme--light.v-datatable .v-datatable__actions {
    position: fixed;
    bottom: 0;
    width: 100%;
}

new Vue({
  el: '#app',
  data() {
    return {
      //pagination: {},
      headers: [{
          text: 'Name',
          value: 'fridgeDisplayName'
        },
        {
          text: 'State',
          value: 'state'
        },
        {
          text: 'Task',
          value: 'task'
        },
      ],
      alarms: [{
          fridgeDisplayName: 'Test1',
          state: 'Some state',
          task: '6.0'
        },
        {
          fridgeDisplayName: 'Test2',
          state: 'Some state',
          task: '6.0'
        },
        {
          fridgeDisplayName: 'Test3',
          state: 'Some state',
          task: '6.0'
        },
        {
          fridgeDisplayName: 'Test4',
          state: 'Some state',
          task: '6.0'
        },
        {
          fridgeDisplayName: 'Test5',
          state: 'Some state',
          task: '6.0'
        },
        {
          fridgeDisplayName: 'Test6',
          state: 'Some state',
          task: '6.0'
        },
        {
          fridgeDisplayName: 'Test7',
          state: 'Some state',
          task: '6.0'
        },
        {
          fridgeDisplayName: 'Test8',
          state: 'Some state',
          task: '6.0'
        },
        {
          fridgeDisplayName: 'Test9',
          state: 'Some state',
          task: '6.0'
        },
        {
          fridgeDisplayName: 'Test10',
          state: 'Some state',
          task: '6.0'
        },
        {
          fridgeDisplayName: 'Test11',
          state: 'Some state',
          task: '6.0'
        },
        {
          fridgeDisplayName: 'Test12',
          state: 'Some state',
          task: '6.0'
        },
        {
          fridgeDisplayName: 'Test13',
          state: 'Some state',
          task: '6.0'
        },
        {
          fridgeDisplayName: 'Test14',
          state: 'Some state',
          task: '6.0'
        },
        {
          fridgeDisplayName: 'Test15',
          state: 'Some state',
          task: '6.0'
        },
        {
          fridgeDisplayName: 'Test16',
          state: 'Some state',
          task: '6.0'
        },
        {
          fridgeDisplayName: 'Test17',
          state: 'Some state',
          task: '6.0'
        }
      ]
    }
  },
  computed: {
    /*pages () {
      if (this.pagination.rowsPerPage == null ||
        this.pagination.totalItems == null
      ) return 0

      return Math.ceil(this.pagination.totalItems / this.pagination.rowsPerPage)
    }*/
  }
})

.theme--light.v-datatable .v-datatable__actions {
    position: fixed;
    bottom: 0;
    width: 100%;
}

<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.4.0/dist/vuetify.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@1.4.0/dist/vuetify.min.css">
<div id="app" data-app>
  <v-data-table :items='alarms' :headers="headers" class="elevation-1" fill-height>
    <template slot="items" slot-scope="props">
                      <td>{{ props.item.fridgeDisplayName }}</td>
                      <td>{{ props.item.state }}</td>
                      <td>{{ props.item.task }}</td>
                    </template>
  </v-data-table>

</div>

full pen code