Vuetify: Show pagination controls at the top of my v-data-table as well as in the footer
·
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
更多推荐

所有评论(0)