vue.js - 验证 : Show pagination controls at the top of my v-data-table as well as in the footer

Question

v-data-table有一个 top插槽，带有 pagination prop 的结构与 footer 的结构匹配投币口。是否可以分配 top插槽引用相同的(大概是 v-pagination )控制 footer正在使用？

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

Answer 1

事实上，v-data-table 中默认显示的控件页脚插槽正常(公共(public) - 非内部)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>

Demo