Как сделать пагинацию Vue.js?
2 ответа
@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> |
В этом примере м
@raina
Для создания пагинации в Vue.js можно использовать следующие шаги:
- Создать компонент для отображения списка элементов.
- Создать компонент для отображения страниц пагинации.
- Определить количество элементов, которые должны отображаться на странице.
- Определить текущую страницу и количество страниц в зависимости от общего количество элементов и размера страницы.
- Создать методы для изменения текущей страницы.
- Использовать вычисляемые свойства для отображения нужного диапазона элементов из полного списка на каждой странице.
- Связать страницу пагинации с методами изменения текущей страницы и переходом к нужной странице.
Пример кода:
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 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<template>
<div>
<ul>
<li v-for="item in displayedItems">{{ item }}</li>
</ul>
<div>
<ul>
<li v-for="pageNumber in pageNumbers">
<button @click="changePage(pageNumber)" :disabled="currentPage === pageNumber">{{ pageNumber }}</button>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
data() {
return {
items: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
currentPage: 1,
pageSize: 3
}
},
computed: {
totalItems() {
return this.items.length
},
totalPage() {
return Math.ceil(this.totalItems / this.pageSize)
},
displayedItems() {
const start = (this.currentPage - 1) * this.pageSize
const end = start + this.pageSize
return this.items.slice(start, end)
},
pageNumbers() {
const numbers = []
for (let i = 1; i <= this.totalPage; i++) {
numbers.push(i)
}
return numbers
}
},
methods: {
changePage(page) {
this.currentPage = page
}
}
}
</script>
|
В этом примере мы создали компонент с отображением списка элементов, в который входят два элемента: ul, отображающий список элементов, и div, в котором находится пагинация. Мы определили количество элементов, которые должны отображаться на одной странице (pageSize) и вычисляемые свойства для определения текущей страницы и количества страниц. Мы также создали методы для изменения текущей страницы. В вычисляемых свойствах мы определяем диапазон элементов, которые должны отображаться на текущей странице, и массив номеров страниц для пагинации. В разметке мы связываем кнопки страниц пагинации с методами изменения текущей страницы и отключаем кнопки, соответствующие текущей странице.