v-spacer 在数据表分组中 header

Question

我有一个 Vuetify 项目。我正在使用带有插槽 group.header 的模板，目前一切顺利。

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

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

codepen

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>

v-spacer 在数据表分组中 header

v-spacer in datatable grouping header

css

vuetify.js