File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<div class="pagination flex-center">
<!-- 첫 페이지로 이동 -->
<button type="button" :disabled="currentPage <= 1" @click="changePage(1)">
<DoubleLeftOutlined />
</button>
<!-- 이전 페이지로 이동 -->
<button type="button" :disabled="currentPage <= 1" @click="changePage(currentPage - 1)">
<LeftOutlined />
</button>
<!-- 페이지 번호 버튼 -->
<template v-for="pageNum in displayedPageNumbers" :key="pageNum">
<button type="button" :class="{ 'page-number': true, clicked: currentPage === pageNum }" :disabled="currentPage === pageNum" @click="changePage(pageNum)"> {{ pageNum }} </button>
</template>
<!-- 다음 페이지로 이동 -->
<button type="button" :disabled="currentPage >= totalPages" @click="changePage(currentPage + 1)">
<RightOutlined />
</button>
<!-- 마지막 페이지로 이동 -->
<button type="button" :disabled="currentPage >= totalPages" @click="changePage(totalPages)">
<DoubleRightOutlined />
</button>
</div>
</template>
<script>
import { DoubleLeftOutlined, LeftOutlined, RightOutlined, DoubleRightOutlined } from '@ant-design/icons-vue';
export default {
components: {
DoubleLeftOutlined,
LeftOutlined,
RightOutlined,
DoubleRightOutlined,
},
props: {
search: {
type: Object,
required: true,
default: () => ({}),
}
},
computed: {
// 현재 페이지
currentPage() {
return this.search.currentPage;
},
// 총 페이지 수
totalPages() {
return this.search.totalPageCount > 0 ? this.search.totalPageCount : 1;
},
// 표시할 페이지 번호 목록
displayedPageNumbers() {
const currentPage = this.currentPage;
const totalPages = this.totalPages;
const visiblePages = this.search.pageSize > 0 ? this.search.pageSize : 10;
// 표시할 페이지 범위 계산
let startPageNum = Math.max(1, currentPage - Math.floor(visiblePages / 2));
let endPageNum = Math.min(totalPages, startPageNum + visiblePages - 1);
// endPage가 최대 페이지 수보다 작을 경우, startPage를 조정
if (endPageNum - startPageNum + 1 < visiblePages) {
startPageNum = Math.max(1, endPageNum - visiblePages + 1);
}
// 페이지 번호 배열 생성
const pageNumbers = [];
for (let i = startPageNum; i <= endPageNum; i++) {
pageNumbers.push(i);
}
return pageNumbers;
}
},
methods: {
// 페이지 변경 처리
changePage(pageNum) {
if (pageNum < 1) pageNum = 1;
if (pageNum > this.totalPages) pageNum = this.totalPages;
if (pageNum !== this.currentPage) {
this.$emit('onChange', pageNum);
}
}
}
}
</script>