v-data-table을 사용 가능한 모든 공간에 수직으로 설치하는 방법

v-data-table을 사용 가능한 모든 공간에 수직으로 설치하는 방법

v-data-table을 "필수 레이아웃" 스냅샷처럼 사용 가능한 모든 공간 및 페이지 지정 막대를 하단에 고정할 수 있는가?

여기 코딩 html이 내가 이미 시도했던 것을 보여주는 코드펜이다.

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

공식 문서에서는 그렇게 할 방법이 없지만 다음 규칙을 추가하면 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>

그

참조URL: https://stackoverflow.com/questions/54463800/how-to-make-vuetify-v-data-table-vertically-span-all-available-space