May 07, 2021 Vant
import Vue from 'vue';
import { Pagination } from 'vant';
Vue.use(Pagination);
<van-pagination
v-model="currentPage"
:total-items="24"
:items-per-page="5"
/>
export default {
data() {
return {
currentPage: 1
}
}
}
<van-pagination
v-model="currentPage"
:page-count="12"
mode="simple"
/>
<van-pagination
v-model="currentPage"
:total-items="125"
:show-page-size="3"
force-ellipses
/>
Parameters | Description | Type | The default |
---|---|---|---|
v-model | The current page number | number | - |
mode |
Display mode, with an optional value of
simple
|
string |
multi
|
prev-text | The previous button text | string |
上一页
|
next-text | Next button text | string |
下一页
|
page-count | The total number of pages | number | string | Calculated based on the number of pages |
total-items | The total number of records | number | string |
0
|
items-per-page | The number of records per page | number | string |
10
|
show-page-size | The number of page numbers displayed | number | string |
5
|
force-ellipses | Whether to display an oddity | boolean |
false
|
The name of the event | Description | Callback parameters |
---|---|---|
change | Triggered when the page number changes | - |