Vuejs2 Vue，Vuetify 2-如何向数据表页脚添加按钮

标题几乎说明了这一切——我想在表尾添加几个fab按钮（我计划使用这些按钮来CRUD表中的记录）。理想情况下，我希望将每页的

行

和分页移到左侧，并在右侧添加按钮，但此时我愿意满足于在左侧添加按钮

我查看了，我认为

body.append

或

footer

可能会这样做，但不知道如何将它们转换到我的项目中，因为它们在API部分中没有提供任何标记（只有javascript对象），API部分下面的示例也没有我想要的

以下是我当前使用的代码，以防有所帮助：

<v-data-table
  v-model="selected"
  item-key="id"
  class="elevation-1"
  :headers="headers"
  :items="items"
  :search="search"
  :sort-by="['expiry.millis', 'label']"
  :sort-desc="[false, true]"
  multi-sort
  show-select
>

  <template v-slot:top>
    <v-toolbar flat color="white">
      <v-toolbar-title>Inventory</v-toolbar-title>
      <div class="flex-grow-1"></div>
      <v-text-field v-model="search" append-icon="mdi-magnify" label="Search" hide-details class="half-width"></v-text-field>
      <div class="flex-grow-1"></div>

      <v-btn color="error" small fab dark v-if="selected.length > 0"><v-icon>mdi-delete-outline</v-icon></v-btn>
      <v-btn color="deep-purple accent-4" small fab dark class="ml-1"><v-icon>mdi-plus</v-icon></v-btn>
    </v-toolbar>
  </template>

  <template v-slot:item.expiry="{ item }">
    {{ item.expiry.until }}
    <v-icon :title="item.expiry.date.format('DD/MM/YYYY')">mdi-information-outline</v-icon>
  </template>

</v-data-table>

库存
删除大纲
mdi plus
{{item.expiration.until}
mdi信息概要

正如您所看到的，我目前在工具栏中有我的按钮，还有表名和搜索栏

---

我正在使用Vuetify:2.0.0。如果我需要包含任何其他信息，请告诉我，我很乐意更新我的问题。

有

正文的标记。在此处附加
：
从您链接到的页面中，要点是它应该如下所示：
..
我通过在数据表下添加v卡来伪造按钮。检查我的钢笔



mdi检查所选域：
blb
还有更多
全部导出
根据@MarcelusTrojahn的建议，我在
中使用了
。该表将包含在
中，并在末尾包含按钮容器

例如：


mdi雪佛龙左上角
{{`${currentPageFrom}-${currentPageTo}`}
Nextmdi雪佛龙右侧

请参阅随附的代码笔：
我不知道这是否对您有帮助，或者这是否是应该的方法，但当我想在我的v-data-table下面添加一个晶圆盒时，我会将该表放在一个v-card中。。。比如：@MarcelusTrojahn谢谢你的提示，它做得不错。如果你想把你的评论变成一个答案，如果在第二天左右没有更好的消息出现，我会接受的。正如迈克尔提到的，还有这个选择。我做了一些测试，我的替代品或Michael的目视结果都是一样的（同样，v-slot:footer也有效）。我没有成功地使2个或更多的晶圆厂按钮看起来不错，虽然。。。以上所有选项只需一个按钮即可。
<div id="app">
  <v-app>
    <v-content>
      <v-container>
        <template>
          <v-data-table
            :headers="headers"
            :items="desserts"
            :items-per-page="5"
            class="elevation-1"
          ></v-data-table>
        </template>
        <v-card style="border-top-left-radius: 0; border-top-right-radius: 0; box-shadow: 0px 5px 1px -2px rgba(0, 0, 0, 0.2), 0px 5px 2px 0px rgba(0, 0, 0, 0.14), 0px 5px 5px 0px rgba(0, 0, 0, 0.12);">
          <v-card-text>
            <div style="position: absolute; top: -42px" class="body-1 font-weight-bold">
              <v-icon class="mdi-18px roundedIcon success" style="color: white">mdi-check</v-icon> Selected domains:
            </div>
            <template>
              <v-chip class="mr-2 mb-2" close>blb</v-chip>
            </template>
            <template>
              <v-chip class="mb-2" close>and bla more</v-chip>
              </template>
          </v-card-text>
          <v-card-actions class="actionsDetails" style="background: rgb(249, 249, 249); border-top-left-radius: 0; border-top-right-radius: 0">

          <v-spacer></v-spacer>
          <v-btn text normal >Export All</v-btn>

          </v-card-actions>

        </v-card>
      </v-container>
    </v-content>
  </v-app>
</div>