Answer a question

The v-data-table has a top slot, with a pagination prop whose structure matches that of the footer slot. Is it possible to assign the top slot to reference the same (presumably a v-pagination) control that the footer is using?

My goal here is to duplicate the pagination controls (that are in the footer) at the top of the table.

Answers

In fact, controls shown by default in v-data-table footer slot is normal (public - not internal) Vuetify component v-data-footer. You can add it into the top slot easily like this:

<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

Logo

Vue社区为您提供最前沿的新闻资讯和知识内容

更多推荐