Vuetify V-Data-Table 页脚添加按钮 [英] Vuetify V-Data-Table footer Add Button

问题描述

我想在 v-data-table 页脚中添加一个类似于此图像的按钮.

问题是，如果表格包含数据，我通常可以添加一个按钮，但是，如果没有数据，则该按钮不会呈现.

代码如下:

<模板 v-slot:footer.page-text><v-btn颜色=主要"黑暗的类=ma-2"@click=buttonCallback">按钮</v-btn></模板></v-data-table>

这就是我想要实现的->图片

解决方案

这里有一个带按钮的数据表示例:

<v-app id="inspire"><v-数据表:headers="headers";:items="configs";:items-per-page=5"类=海拔1"；><模板 v-slot:footer.page-text><v-btn颜色=主要"黑暗的类=ma-2"@click=buttonCallback">按钮</v-btn></模板></v-data-table></v-app>

https://codepen.io/jairoerazo/pen/wvzYBVW

您可以删除 configs 数组项并呈现按钮.

I want to add a button in the v-data-table footer similar to this image.

The issue is I can normally add a button if the table contains data, however, if there's no data, the button doesn't render.

Here's the code:

<v-data-table
   class="elevation-1"
   :headers="headers"
   :items="configs"
   item-key="id"
   :items-per-page="10">
      <template v-slot:footer.page-text>
        <v-btn
          color="primary"
          dark
          class="ma-2"
          @click="buttonCallback">
            Button
          </v-btn>
      </template>
</v-data-table>

This is what I want to achieve -> Image

解决方案

Here have you a data table example with the button:

<div id="app">
  <v-app id="inspire">
    <v-data-table
      :headers="headers"
      :items="configs"
      :items-per-page="5"
      class="elevation-1"
    >
      <template v-slot:footer.page-text>
        <v-btn
          color="primary"
          dark
          class="ma-2"
          @click="buttonCallback">
            Button
          </v-btn>
      </template>
    </v-data-table>
  </v-app>
</div>

https://codepen.io/jairoerazo/pen/wvzYBVW

You can delete the configs array items and the button is rendered.

这篇关于Vuetify V-Data-Table 页脚添加按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！