Pagination 페이지 매김

데이터 페이지 매김 내비게이션입니다. 전체 항목 수 표시, 페이지당 항목 수 전환, 페이지 이동과 간결 모드를 지원합니다.

페이지 매김

<template>
  <div class="demo-col" style="gap: 20px">
    <LhPagination :total="total" :current.sync="current" :page-size="pageSize" />
    <p class="demo-note">current={{ current }}, pageSize={{ pageSize }}</p>
    <LhPagination
      :total="total"
      show-total
      show-size-changer
      show-jumper
      :page-sizes="[10, 20, 50, 100]"
      :current.sync="current2"
      @change="onChange"
    />
    <p class="demo-note">showTotal + showSizeChanger + showJumper, change 이벤트: {{ lastChange }}</p>
    <LhPagination :total="total" simple :current.sync="current3" />
    <p class="demo-note">simple 간결 모드</p>
    <LhPagination :total="total" disabled :current.sync="current4" />
    <p class="demo-note">disabled 비활성화</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    total: 128,
    current: 3,
    pageSize: 10,
    current2: 1,
    current3: 2,
    current4: 1,
    lastChange: '(없음)',
  }),
  methods: {
    onChange(page, size) {
      this.lastChange = `${page}페이지, 페이지당 ${size}개`
    },
  },
}
</script>

Props

프로퍼티	설명	타입	기본값
total	전체 데이터 수 (필수)	number	—
pageSize	페이지당 항목 수	number	—
current	현재 페이지 (:current.sync, 이벤트 이름 update:current)	number	—
pageSizes	페이지당 항목 수 옵션	number[]	—
showTotal	전체 항목 수 표시 여부	boolean	false
showSizeChanger	페이지당 항목 수 전환 표시 여부	boolean	false
showJumper	페이지 이동 입력 표시 여부	boolean	false
simple	간결 모드	boolean	false
disabled	비활성화 여부	boolean	false
sx	sx 레이아웃 단축 속성	—	—

이벤트

이벤트	설명	콜백 매개변수
change	페이지 또는 페이지당 항목 수가 변경됨	(현재 페이지, 페이지당 항목 수)