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	頁碼或每頁條數變化	(當前頁, 每頁條數)