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 によるレイアウト省略記法	—	—

Events

イベント	説明	コールバックパラメータ
change	ページ番号またはページあたりの件数が変化	(現在のページ, ページあたりの件数)