时间戳

首页 > 解决方案 > 数据表分组标题中的 v-spacer

css - 数据表分组标题中的 v-spacer

问题描述

我有一个 Vuetify 项目。我正在使用带有插槽 group.header 的模板，到目前为止一切都很好。

现在我想<v-spacer>在这个模板中使用 a 。它在一个<v-sheet>.

当我使用时，<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

标签： cssvuetify.js

解决方案

v-spacer基本上只是一个带有样式的 div flex-grow: 1。所以要让这个工作的父容器v-spacer需要有display: flex.
在您的情况下，您可以将其添加到v-sheet：

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

推荐阅读