bootstrapVue b-pagination 10페이지씩 이동

치읓이응·2022년 12월 16일
1

VUE

목록 보기
3/4
post-thumbnail

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">&lt;</span>
	</template>
	<template #next-text>
	  <span class="text-danger">&gt;</span>
	</template>
</b-pagination>


pageClick(e) {
  this.howManyPages = Math.ceil(this.totalRows / this.size)
  const whichBtn = e.target.innerHTML;

  if (whichBtn.includes('&gt;')) {
    this.$emit('plusTenPage', this.howManyPages, e);
  }
  if (whichBtn.includes('&lt;')) {
    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;
  }
},
profile
돌고 돌아 개발자

0개의 댓글