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

Question

标题几乎说明了一切 - 我想在表页脚中添加几个 fab 按钮（我计划用它们在表中 CRUD 记录）。理想情况下，我想将

Rows per page

和分页移至左侧，并在右侧添加按钮，但此时我愿意在左侧添加按钮。

我查看了有关数据表插槽的文档，我认为

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>

如您所见，我目前在工具栏中有按钮，以及表名称和搜索栏。

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

Answer 1

这里有

body.append

的标记： https://codepen.io/pen/?&editable=true&editors=101 取自您链接到的页面，重点是它应该如下所示：

<template v-slot:body.append>...

Answer 2

我通过在数据表下添加 v-card 来伪造按钮。检查我的笔

https://codepen.io/rveruna/pen/jONewxj

<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>

Answer 3

根据@MarcelusTrojahn的建议，我在

<v-data-table />

内使用了

<v-card>

。该表格将包含在

<v-card-text>

和末尾的按钮容器中

例如：

<div id="app">
  <v-app id="inspire">
    <v-content>
      <v-card>
        <v-card-text class="table-container">
          <v-data-table
            :headers="headers"
            :items="desserts"
            :items-per-page="5"
            class="elevation-1"
          ></v-data-table>
        </v-card-text>
        <div class="buttons-container">
          <v-btn color="primary" class="footerBtn">
            <v-icon right dark style='margin-right: 5px;'>mdi-chevron-left</v-icon>Prev
          </v-btn>
          <span class="footerBtn pageCount">{{ `${currentPageFrom} - ${currentPageTo}` }}</span>
          <v-btn color="primary" class="footerBtn">Next<v-icon right dark>mdi-chevron-right</v-icon></v-btn>
        </div>
      </v-card> 
    </v-content>
  </v-app>
</div>

请参阅随附的代码笔：https://codepen.io/bertrandmartel/pen/mdJYaBO