我正试图找到一个修改分页组件的解决方案。我想使用vuetify分页组件显示每两个或每三个站点。基本版本允许显示每个页面。
模板：
<div class="text-center">
<v-pagination
v-model="page"
:length="4"
prev-icon="mdi-menu-left"
next-icon="mdi-menu-right"
></v-pagination>
</div>
</template>
脚本：
export default {
data () {
return {
page: 1,
}
},
}
</script>
数据表：
<v-data-table dense
v-model="selected"
:headers="headers"
:items="desserts"
:single-select="singleSelect"
item-key="name"
show-select
class="elevation-1"
:items-per-page="7"
> </v-data-table>
您需要实现next和previous事件的函数。在这里，我编写了一个用于单击next事件的函数。这会发生两次场偏移。
new Vue({
el: '#app',
vuetify: new Vuetify(),
data() {
return {
page: 1,
length: 6
}
},
methods: {
next2() {
if (this.page + 1 <= this.length) {
this.page = this.page + 1;
}
}
}
})<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div id="app">
<v-app id="inspire">
<div class="text-center">
<v-pagination v-model="page" :length="length" prev-icon="mdi-menu-left" next-icon="mdi-menu-right" @next="next2"></v-pagination>
</div>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
</body>
</html>