vant pagination

Vant is a popular mobile UI framework for Vue.js. It provides a Pagination component that allows you to easily implement pagination functionality in your Vue.js applications. The Vant Pagination component is used to split long lists or tables into multiple pages, providing a more user-friendly experience.

To use the Vant Pagination component, you need to follow these steps:

1. Install Vant: You can install Vant using npm or yarn by running the following command:

   npm install vant

2. Import the Pagination component: In your Vue.js component file, import the Pagination component from Vant:

   import { Pagination } from 'vant';

3. Register the Pagination component: Register the Pagination component in the Vue.js component's `components` option:

   export default {
     components: {
       [Pagination.name]: Pagination,
     },
   };

4. Use the Pagination component: In your template, add the Pagination component and bind the necessary props:

   <van-pagination
     :total-items="totalItems"
     :items-per-page="itemsPerPage"
     :current-page.sync="currentPage"
   ></van-pagination>

Here, `totalItems` represents the total number of items in your list or table, `itemsPerPage` specifies the number of items to display per page, and `currentPage` represents the current active page.

5. Handle pagination events: You can listen to pagination events like `change` to update your data or perform other actions. For example:

   export default {
     methods: {
       onPageChange(page) {
         // Handle page change event here
       },
     },
   };

In your template, bind the `change` event to the method:

   <van-pagination
     ...
     @change="onPageChange"
   ></van-pagination>

That's it! You have successfully implemented pagination using the Vant Pagination component in your Vue.js application.