Question

标题几乎说明了一切-我想在表尾添加几个fab按钮（我打算用这些按钮在表中添加CRUD记录）。理想情况下，我想将Rows per page和分页移动到左侧，并在右侧添加按钮，但是在这一点上，我愿意在左侧添加按钮。

我看着documentation on 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。让我知道是否需要提供其他信息，我很乐意更新我的问题。

Answer 1

这里有body.append的标记： https://codepen.io/pen/?&editable=true&editors=101 从您链接到的页面中获取，关键是它应该看起来像这样： <template v-slot:body.append>...

Answer 2

我在数据表下添加了v卡来伪造按钮。检查我的笔

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

.page {
    clear: both;
    .products {
        .product {
            float: left;
            margin-bottom: 20px;
            width: 200px;
            height: 100px;
            border: 1px solid #ff0000;
            background: green;
        }
    }
    .slider-wrap{
        .products {
            .product {
                background: yellow;
            }
        }
    }
}

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

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

3 个答案: