Vuetify V-Data-Table 页脚添加按钮

Question

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

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

代码如下：

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

这就是我想要实现的目标：

Answer 1

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

<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

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