Pagination

Pagination (페이지네이션)

한 페이지에 표시할 데이터가 너무 많으면 페이지네이션을 사용해요.

출처: 문서

본문

기본 사용법 (Basic usage)

표시하고 싶은 페이지네이션 요소들을 콤마로 구분해 layout으로 설정해요. 페이지네이션 요소는 다음과 같아요: prev (이전 페이지로 이동하는 버튼), next (다음 페이지로 이동하는 버튼), pager (페이지 목록), jumper (이동 입력), total (전체 항목 수), sizes (페이지 크기를 정하는 select), 그리고 -> (이 기호 뒤의 모든 요소는 오른쪽으로 당겨져요).

.example-pagination-block + .example-pagination-block {
  margin-top: 10px;
}
.example-pagination-block .example-demonstration {
  margin-bottom: 16px;
}

페이지네이터 수 (Number of pagers)

기본적으로 Pagination은 7페이지가 넘으면 추가 페이지 버튼을 접어요. pager-count 속성으로 설정할 수 있어요.

배경색 버튼 (Buttons with background color)

background 속성을 설정하면 버튼에 배경색이 생겨요.

작은 Pagination (Small Pagination)

공간이 제한된 경우 작은 페이지네이션을 사용해요. size를 설정해서 크기를 바꿔요. 여기 작은 예제가 있어요.

한 페이지일 때 숨김 (Hide pagination when there is only one page)

페이지가 하나뿐일 때 hide-on-single-page 속성을 설정해서 페이지네이션을 숨겨요.

import { ref } from 'vue'

const value = ref(false)

더 많은 요소 (More elements)

시나리오에 따라 더 많은 모듈을 추가해요. 이 예제는 완전한 사용 사례예요. size-change와 current-change 이벤트를 사용해서 페이지 크기 변경과 현재 페이지 변경을 처리해요. page-sizes는 정수 배열을 받는데, 각각은 sizes select 옵션의 서로 다른 페이지 크기를 나타내요. 예를 들어 [100, 200, 300, 400]은 select에 100, 200, 300, 400개 항목이라는 네 옵션이 있음을 뜻해요.

import { ref } from 'vue'

import type { ComponentSize } from 'element-plus'

const currentPage1 = ref(5)
const currentPage2 = ref(5)
const currentPage3 = ref(5)
const currentPage4 = ref(4)
const pageSize2 = ref(100)
const pageSize3 = ref(100)
const pageSize4 = ref(100)
const size = ref('default')
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}

.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}

API

Attributes

WARNING 일부 deprecated 사용법을 감지해요. 페이지네이션이 나타나지 않거나 예상대로 동작하지 않으면 다음 규칙을 확인하세요:

• total과 page-count 중 하나를 반드시 정의해야 해요. 그래야 전체 페이지 수를 결정할 수 있어요. 둘 다 정의하면 page-count가 우선해요.
• current-page를 정의했다면 @update:current-page도 정의해서 current-page 변경을 들어야 해요. 그렇지 않으면 페이지네이션이 동작하지 않아요.
• page-size를 정의하고 페이지 크기 선택기가 표시된다면(sizes가 layout에 포함) @update:page-size도 정의해서 page-size 변경을 들어야 해요. 그렇지 않으면 페이지 크기 변경이 동작하지 않아요.

Events

WARNING 위 이벤트는 권장하지 않지만(호환성 때문에 여전히 지원돼요), v-model로 양방향 데이터 바인딩을 사용하는 편이 더 좋아요.

Slots

더 알아보기 (Learn more)

• Infinite Scroll 컴포넌트 — 무한 스크롤
• Progress 컴포넌트 — 진행 바
• Select 컴포넌트 — 선택
• Element Plus 시작하기 — 프로젝트 설정