Vuetify：在我的 v-data-table 顶部以及页脚中显示分页控件

Question

在v-data-table具有top狭槽，具有pagination支撑其结构相匹配，所述的footer槽。是否可以将top插槽分配给正在使用的相同（大概是一个v-pagination）控件footer？

我的目标是复制表格顶部的分页控件（位于页脚中）。

Answer 1

事实上，在v-data-table页脚槽中默认显示的控件是正常的（公共 - 不是内部）Vuetify 组件v-data-footer。您可以像这样轻松地将其添加到顶部插槽中：

<div id="app">
  <v-app id="inspire">
    <v-data-table
      v-model="selected"
      :headers="headers"
      :items="desserts"
      :items-per-page="5"
      :single-select="true"
      item-key="name"
      show-select
      class="elevation-1"
    >
      <template v-slot:top="{ pagination, options, updateOptions }">
        <v-data-footer 
          :pagination="pagination" 
          :options="options"
          @update:options="updateOptions"
          items-per-page-text="$vuetify.dataTable.itemsPerPageText"/>
      </template>
    </v-data-table>
  </v-app>
</div>

演示