bootstrap의 b-pagination에는 끝 페이지로 가는 ">>"버튼이 있고
다음페이지로 이동하는 ">"버튼이 있다.
다음페이지로 이동하는 ">"버튼을 10페이지씩 이동하게 구현해야했다.
라이브러리 자체 기능은 없었다.
// CHILD COMPONENT
<b-pagination v-model="enterPage" :total-rows="totalRows" :per-page="size" @page-click="pageClick">
<template #prev-text>
<span class="text-danger"><</span>
</template>
<template #next-text>
<span class="text-danger">></span>
</template>
</b-pagination>
pageClick(e) {
this.howManyPages = Math.ceil(this.totalRows / this.size)
const whichBtn = e.target.innerHTML;
if (whichBtn.includes('>')) {
this.$emit('plusTenPage', this.howManyPages, e);
}
if (whichBtn.includes('<')) {
this.$emit('minusTenPage', e);
}
},
// PARENT COMPONENT
<CHILD-COMPNENT @plusTenPage="plusTenPage" @minusTenPage="minusTenPage" />
minusTenPage(e) {
if (this.searchOpts.page - 10 > 1) {
e.preventDefault(); // 한 페이지씩 이동하는걸 막는다.
this.searchOpts.page -= 10;
return;
} else {
return;
}
},
plusTenPage(howManyPages, e) {
if (this.searchOpts.page + 10 < howManyPages) {
e.preventDefault(); // 한 페이지씩 이동하는걸 막는다.
this.searchOpts.page += 10;
return;
} else {
return;
}
},