Vue.js 如何使vuetify v-data-table垂直跨越所有可用空间

是否可以使v-data-table垂直跨越所有可用空间，并使分页条像“所需布局”快照上的那样粘贴到底部

{{props.item.fridgeDisplayName}
{{props.item.state}
{{props.item.task}

在官方文档中，没有办法做到这一点，但您只需使用CSS添加以下规则即可做到：

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

newvue({
el:“#应用程序”，
数据（）{
返回{
//分页：{}，
标题：[{
文本：“名称”，
值：“fridgeDisplayName”
},
{
案文：“国家”，
值：“状态”
},
{
文本：“任务”，
值：“任务”
},
],
警报：[{
fridgeDisplayName:'Test1'，
状态：“某个状态”，
任务：“6.0”
},
{
fridgeDisplayName:'Test2'，
状态：“某个状态”，
任务：“6.0”
},
{
fridgeDisplayName:'Test3'，
状态：“某个状态”，
任务：“6.0”
},
{
fridgeDisplayName:'Test4'，
状态：“某个状态”，
任务：“6.0”
},
{
fridgeDisplayName:'Test5'，
状态：“某个状态”，
任务：“6.0”
},
{
fridgeDisplayName:'Test6'，
状态：“某个状态”，
任务：“6.0”
},
{
fridgeDisplayName:'Test7'，
状态：“某个状态”，
任务：“6.0”
},
{
fridgeDisplayName:'Test8'，
状态：“某个状态”，
任务：“6.0”
},
{
fridgeDisplayName:'Test9'，
状态：“某个状态”，
任务：“6.0”
},
{
fridgeDisplayName:'Test10'，
状态：“某个状态”，
任务：“6.0”
},
{
fridgeDisplayName:'Test11'，
状态：“某个状态”，
任务：“6.0”
},
{
fridgeDisplayName:'Test12'，
状态：“某个状态”，
任务：“6.0”
},
{
fridgeDisplayName:'Test13'，
状态：“某个状态”，
任务：“6.0”
},
{
fridgeDisplayName:'Test14'，
状态：“某个状态”，
任务：“6.0”
},
{
fridgeDisplayName:'Test15'，
状态：“某个状态”，
任务：“6.0”
},
{
fridgeDisplayName:'Test16'，
状态：“某个状态”，
任务：“6.0”
},
{
fridgeDisplayName:'Test17'，
状态：“某个状态”，
任务：“6.0”
}
]
}
},
计算：{
/*页数（）{
如果（this.pagination.rowsPerPage==null||
this.pagination.totalItems==null
)返回0
返回Math.ceil（this.pagination.totalItems/this.pagination.rowsPerPage）
}*/
}
})

.theme--light.v-datatable.v-datatable\u动作{
位置：固定；
底部：0；
宽度：100%；
}

{{props.item.fridgeDisplayName}
{{props.item.state}
{{props.item.task}

在codePen中，在我将样式粘贴到CSS部分后，此CSS就发挥了神奇的作用，但我不知道在Vue+Vuetify应用程序中在何处应用此样式。提前感谢您。如果您使用的是单文件组件.vue，则可以使用datatable在样式部分中添加插件组件。工作起来很有魅力！非常感谢。有没有办法在全球范围内定义它？因为我有太多的组件，其中包含表格。。。。没有“范围”的权限将全局应用。谢谢在assets文件夹中创建一个名为

main.css

的文件，该文件在其内部进行管理，并在

main.js

中导入它，如

import./assets/main.css'

之后导入'vuetify/dist/vuetify.min.css'

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