数据表分组标头中的v-spacer

Question

我有一个Vuetify项目。我正在使用一个插槽组.header的模板，到目前为止还不错。

现在我想在此模板中使用<v-spacer>。它在CCD_ 2中。

当我使用<v-spacer></v-spacer>时，我希望内容在同一行。但它将在下一行。用户Vuetify的系统，我如何在同一行上显示间距后的按钮？

代码笔

https://codepen.io/h3ll/pen/VwWOxdJ?editors=1010

HTML

<v-data-table
:headers="headers"
:items="desserts"
item-key="name"
sort-by="name"
group-by="category"
class="elevation-1"
show-group-by
>
<template v-slot:group.header="{items, isOpen, toggle}">
<th @click="toggle" colspan="12" class="ma-0 pa-0">
<v-sheet>
<v-icon class="mr-3">{{ isOpen ? 'mdi-folder-open' : 'mdi-folder' }}</v-icon>
{{ items[0].category }}
<v-spacer></v-spacer>
<v-btn x-small>I WANT TO BE ON THE RIGHT SIDE</v-btn>
</v-sheet>
</th>
</template>
</v-data-table>

javascript

new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
headers: [
{
text: 'Dessert (100g serving)',
align: 'start',
value: 'name',
groupable: false,
},
{ text: 'Category', value: 'category', align: 'right' },
{ text: 'Dairy', value: 'dairy', align: 'right' },
],
desserts: [
{
name: 'Frozen Yogurt',
category: 'Ice cream',
dairy: 'Yes',
},
{
name: 'Ice cream sandwich',
category: 'Ice cream',
dairy: 'Yes',
},
...
],
}
},
})

更新

我可以用这样的普通css来修复它

<template v-slot:group.header="{items, isOpen, toggle}">
<th colspan="12">
<v-sheet>
<div @click="toggle" style="display: inline; width: 100vw">
<v-icon class="mr-3">{{ isOpen ? 'mdi-folder-open' : 'mdi-folder' }}</v-icon>
{{ items[0].folder }}
</div>
<div style="display: inline; float: right;">
<v-icon @click="deleteItem(item)">mdi-dots-vertical</v-icon>
</div>
</v-sheet>
</th>
</template>
```
But I wondering why Vuetify v-spacer is not working

Answer 1

v-spacer基本上只是一个样式为flex-grow: 1的div。因此，要实现这一点，v-spacer的父容器需要有display: flex
在您的情况下，您可以将其添加到v-sheet:

<v-sheet class="d-flex">
<!-- content -->
</v-sheet>