@raina
Для реализации пагинации в Vue.js вы можете использовать компонент vue-pagination-2
. Этот компонент предоставляет стандартный интерфейс для пагинации, который включает кнопки "предыдущая" и "следующая", а также список страниц. Он также поддерживает настраиваемый размер страницы и количество страниц, которые отображаются одновременно.
Чтобы использовать этот компонент, вам нужно установить его с помощью npm:
1
|
npm install vue-pagination-2 |
Затем вы можете импортировать его в ваш компонент и использовать его как тег:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<template> <div> <vue-pagination-2 v-model="currentPage" :total="totalItems" :per-page="itemsPerPage" @pagination-change-page="changePage" ></vue-pagination-2> </div> </template> <script> import VuePagination from 'vue-pagination-2' export default { components: { VuePagination }, data() { return { currentPage: 1, itemsPerPage: 10, totalItems: 100 } }, methods: { changePage(page) { this.currentPage = page } } } </script> |
В этом примере м