时间戳

首页 > 解决方案 > Vue, Vuetify 2 - 如何向数据表页脚添加按钮

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

问题描述

标题几乎说明了一切 - 我想在表格页脚添加几个 fab 按钮（我计划用它来 CRUD 表格中的记录）。理想情况下，我想将Rows per page分页移到左侧，并在右侧添加按钮，但此时我愿意在左侧添加按钮。

我查看了关于 data table slots 的文档，我认为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。如果我需要包含任何其他信息，请告诉我，我很乐意更新我的问题。

标签： vuejs2vuetify.js

解决方案

这里有标记body.append： https://codepen.io/pen/?&editable=true&editors=101 取自您链接到的页面，关键是它应该如下所示： <template v-slot:body.append>...

推荐阅读