Vuetify：在我的 v-data-table 顶部以及页脚中显示分页控件
Posted
技术标签:
【中文标题】Vuetify：在我的 v-data-table 顶部以及页脚中显示分页控件【英文标题】：Vuetify: Show pagination controls at the top of my v-data-table as well as in the footer 【发布时间】：2020-05-02 17:21:37 【问题描述】：v-data-table 有一个 top 插槽，其结构与 footer 插槽的结构匹配的 pagination 属性。是否可以分配top 插槽来引用footer 正在使用的相同（可能是v-pagination）控件？
我的目标是复制表格顶部的分页控件（位于页脚中）。
【问题讨论】：
【参考方案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>
Demo
【讨论】：
这正是我想要的。我不想重新发明***，但找不到这样的例子。谢谢！ 要使其与v-data-iterator 一起使用，请使用v-slot:header 而不是v-slot:top。
要从显示中删除旧页脚，您需要添加hide-default-footer
@EbrahimKaram 很好的提示，但我的目的是在 页眉和页脚中显示分页控件。【参考方案2】：
如果它使用 v-paginate 组件会起作用吗？这是一个关于 codepen 的工作示例。
https://codepen.io/v08i/pen/JjoVmVR
<div id="app">
<v-app id="inspire">
<v-card>
<v-btn color="primary" @click="dialog = true">Open Dialog</v-btn>
<v-dialog v-model="dialog" :fullscreen="fullScreen" transition="dialog-bottom-transition" :overlay=false
scrollable>
<v-card>
<v-toolbar style="flex: 0 0 auto;" dark class="primary">
<v-btn icon @click.native="dialog = false" dark>
<v-icon>close</v-icon>
</v-btn>
<v-toolbar-title>Data</v-toolbar-title>
<v-spacer></v-spacer>
</v-toolbar>
<v-card-text>
<v-card-title>
Nutrition
<v-spacer></v-spacer>
<v-text-field
:append-icon="search?'close':'search'"
:append-icon-cb="() => (search = '')"
@keydown.native.escape="search=''"
label="Search"
single-line
hide-details
v-model="search"
></v-text-field>
</v-card-title>
<div>
<v-pagination v-model="pagination.page" :length="pages"></v-pagination>
<v-data-table
v-bind:headers="headers"
v-bind:items="items"
v-bind:search="search"
v-bind:pagination.sync="pagination"
hide-actions
class="elevation-1"
>
<template slot="header" scope="props">
</template>
<template slot="headerCell" scope="props">
<v-tooltip bottom>
<span slot="activator">
props.header.text
</span>
<span>
props.header.text
</span>
</v-tooltip>
</template>
<template slot="items" scope="props">
<td> props.item.name </td>
<td class="text-xs-right"> props.item.calories </td>
<td class="text-xs-right"> props.item.fat </td>
<td class="text-xs-right"> props.item.carbs </td>
<td class="text-xs-right"> props.item.protein </td>
<td class="text-xs-right"> props.item.sodium </td>
<td class="text-xs-right"> props.item.calcium </td>
<td class="text-xs-right"> props.item.iron </td>
</template>
</v-data-table>
<div class="text-xs-center pt-2">
<v-pagination v-model="pagination.page" :length="pages"></v-pagination>
</v-card-text>
<div style="flex: 1 1 auto;"></div>
</v-card>
</v-dialog>
</v-card>
</v-app>
</div>
new Vue(
el: '#app',
data ()
return
dialog: false,
fullScreen: true,
search: '',
pagination: ,
selected: [],
headers: [
text: 'Dessert (100g serving)',
align: 'left',
sortable: false,
value: 'name'
,
text: 'Calories', value: 'calories' ,
text: 'Fat (g)', value: 'fat' ,
text: 'Carbs (g)', value: 'carbs' ,
text: 'Protein (g)', value: 'protein' ,
text: 'Sodium (mg)', value: 'sodium' ,
text: 'Calcium (%)', value: 'calcium' ,
text: 'Iron (%)', value: 'iron'
],
items: [
value: false,
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
sodium: 87,
calcium: '14%',
iron: '1%'
,
value: false,
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3,
sodium: 129,
calcium: '8%',
iron: '1%'
,
value: false,
name: 'Eclair',
calories: 262,
fat: 16.0,
carbs: 23,
protein: 6.0,
sodium: 337,
calcium: '6%',
iron: '7%'
,
value: false,
name: 'Cupcake',
calories: 305,
fat: 3.7,
carbs: 67,
protein: 4.3,
sodium: 413,
calcium: '3%',
iron: '8%'
,
value: false,
name: 'Gingerbread',
calories: 356,
fat: 16.0,
carbs: 49,
protein: 3.9,
sodium: 327,
calcium: '7%',
iron: '16%'
,
value: false,
name: 'Jelly bean',
calories: 375,
fat: 0.0,
carbs: 94,
protein: 0.0,
sodium: 50,
calcium: '0%',
iron: '0%'
,
value: false,
name: 'Lollipop',
calories: 392,
fat: 0.2,
carbs: 98,
protein: 0,
sodium: 38,
calcium: '0%',
iron: '2%'
,
value: false,
name: 'Honeycomb',
calories: 408,
fat: 3.2,
carbs: 87,
protein: 6.5,
sodium: 562,
calcium: '0%',
iron: '45%'
,
value: false,
name: 'Donut',
calories: 452,
fat: 25.0,
carbs: 51,
protein: 4.9,
sodium: 326,
calcium: '2%',
iron: '22%'
,
value: false,
name: 'KitKat',
calories: 518,
fat: 26.0,
carbs: 65,
protein: 7,
sodium: 54,
calcium: '12%',
iron: '6%'
],
,
computed:
pages ()
return this.pagination.rowsPerPage ? Math.ceil(this.items.length / this.pagination.rowsPerPage) : 0
,
methods:
)
【讨论】：
以上是关于Vuetify：在我的 v-data-table 顶部以及页脚中显示分页控件的主要内容，如果未能解决你的问题，请参考以下文章
Vuetify v-autocomplete 和 v-data-table 不起作用
渲染中的Vuetify v-data-table错误：“TypeError：_a未定义”
如何清除 v-data-table 中的选定行，Vuetify
如何在 Vuetify v-data-table 上对齐标题