Привет! Представляю вашему вниманию перевод статьи "Pagination in Vue.js" автора Denny Headrick.
Пагинация увеличивает UX, позволяя пользователям визуализировать данные в небольших блоках или на страницах. Вот и компонент Vue.js можно сделать с разбивкой по страницам, который позволит нам просматривать только часть наших данных за раз.
Сначала я буду добавлять кусочек за кусочком в свой JavaScript объект. А затем покажу template (шаблон)
Из всех локальных данных, мне нужны, только данные - номер страницы.
data(){
return {
pageNumber: 0 // по умолчанию 0
}
}
Для props (свойств), передача данных является обязательной, но я также возьму size аргумент для максимального количества записей.
props:{
listData:{
type:Array,
required:true
},
size:{
type:Number,
required:false,
default: 10
}
}
Для моей реализации я буду использовать методы для перехода на previous (предыдущую) и next (следующую) страницы:
methods:{
nextPage(){
this.pageNumber++;
},
prevPage(){
this.pageNumber--;
}
}
Быстрое вычисляемое свойство computed, чтобы выяснить, сколько есть страниц:
pageCount(){
let l = this.listData.length,
s = this.size;
return Math.floor(l/s);
}
Теперь вычисленное свойство (computed) paginatedData - это место, где все объединяется. Это отфильтрованные данные, которые будут отображаться.
paginatedData(){
const start = this.pageNumber * this.size,
end = start + this.size;
return this.listData.slice(start, end);
}
Редакция: я изначально делал что-то ужасное и громоздкое, чтобы скопировать массив. Использование .slice - лучший подход. Спасибо, Alexander Karelas.
И наш template (шаблон)
<div>
<ul>
<li v-for="p in paginatedData">
{{p.first}}
{{p.last}}
{{p.suffix}}
</li>
</ul>
<button @click="prevPage">
Previous
</button>
<button @click="nextPage">
Next
</button>
</div>
Я хочу, чтобы кнопки работали, когда они только должны. Для кнопки prevPage я добавлю:
:disabled=«pageNumber=0»
а для кнопки nextPage добавлю:
:disabled=«pageNumber >= pagecount -1»
Рабочая демонстрация моего компонента:
Иногда бывает трудно переоценить ситуацию, но разбиение на страницы - это простая функция, которую мы можем предложить нашим пользователям без особых усилий.
Спасибо за прочтение!
Denny Headrick - веб-разработчик USAF, который слишком сильно любит свою работу. В дополнение к разработке на различных платформах и Vue.js, когда он может, он любит вести блог изредка. Вы можете следить за ним в Twitter на @dennythecoder.
Автор: bad4iz
