Coding With Fun
Home Docker Django Node.js Articles Python pip guide FAQ Policy

Vant Pagination pagination


May 07, 2021 Vant


Table of contents


Introduced

import Vue from 'vue';
import { Pagination } from 'vant';

Vue.use(Pagination);

Code demo

Basic usage

<van-pagination 
  v-model="currentPage" 
  :total-items="24" 
  :items-per-page="5"
/>
export default {
  data() {
    return  {
      currentPage: 1
    }
  }
}

Simple mode

<van-pagination 
  v-model="currentPage" 
  :page-count="12"
  mode="simple" 
/>

Show the odd sign

<van-pagination 
  v-model="currentPage" 
  :total-items="125" 
  :show-page-size="3" 
  force-ellipses
/>

Api

Props

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

Events

The name of the event Description Callback parameters
change Triggered when the page number changes -


Example demonstration