v-data-table 海关分页按钮答案

【问题标题】：v-data-table customs pagination buttonv-data-table 海关分页按钮
【发布时间】：2021-11-29 07:06:49
【问题描述】：

我有一个 v-data-tabel 想要使用分页控制按钮并放置到页面中的某个位置。这是一个简化的代码。

我的问题是我应该更改哪个属性？我尝试“footerProps:{'page-options':20}”，但它不起作用。非常感谢！

我正在使用 vuetify 2.4.6

<v-app>
    <v-data-table
      :headers="headers"
      :items="item"
      item-key="id"
      :footer-props="footerProps"
      hide-default-footer
      >
      <template v-slot:top="{ pagination, options, updateOptions }">
       <v-toolbar color="blue-grey lighten-5">
          <v-card class="ma-0 pa-0 ">
              <v-row>
                <v-col>
                  <v-list-item three-line>
                      <v-list-item-content>
                        <v-list-item-subtitle class="text-wrap">page : {{pagination.page}} of {{pagination.pageCount}} ({{options.itemsPerPage}})</v-list-item-subtitle>
                          <v-list-item-subtitle class="text-wrap">record : {{pagination.pageStart}}-{{pagination.pageStop}} of
                          {{pagination.itemsLength}}</v-list-item-subtitle>
                      </v-list-item-content>
                    </v-list-item>
               </v-col>
               <v-col>
                  <v-btn  @click="advance">advance</v-btn>  
                  <v-btn @click="backward">back</v-btn>
                </v-col>
             </v-row>
           </v-card>
          </v-toolbar>
        ....
      </template>
   </v-data-table>
</v-app>

【问题讨论】：

标签： vuetify.js

【解决方案1】：

您似乎正在寻找v-pagination 组件。您可以将其放在页面上的任何位置并与您的v-data-table 同步。更多信息请查看v-pagination 以及Vuetify 文档页面上的external pagination 示例。

【讨论】：