Pager 分页组件

基于 Element Plus 分页组件封装的通用分页组件，支持页码跳转、每页条数切换等功能。

基础用法

::: demo

<template>
  <div>
    <div class="demo-content">
      <p>当前页：{{ pager.currentPage }}</p>
      <p>每页条数：{{ pager.pageSize }}</p>
      <p>总条数：{{ total }}</p>
    </div>
    <by-pager
      :current-page="pager.currentPage"
      :page-size="pager.pageSize"
      :total="total"
      :page-sizes="pageSizes"
      @change="handlePageChange"
    />
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'

const total = ref(100)

const pager = reactive({
  currentPage: 1,
  pageSize: 25,
})

const pageSizes = ref([10, 15, 20, 25, 30, 50, 100])

const handlePageChange = (values) => {
  pager.currentPage = values.currentPage
  pager.pageSize = values.pageSize
  console.log('分页变化:', values)
}
</script>

<style scoped>
.demo-content {
  padding: 20px;
  background: #f5f5f5;
  margin-bottom: 20px;
  border-radius: 4px;
}
.demo-content p {
  margin: 5px 0;
}
</style>

:::

自定义每页条数选项

::: demo

<template>
  <div>
    <div class="demo-content">
      <p>当前页：{{ pager.currentPage }}</p>
      <p>每页条数：{{ pager.pageSize }}</p>
      <p>总条数：{{ total }}</p>
    </div>
    <by-pager
      :current-page="pager.currentPage"
      :page-size="pager.pageSize"
      :total="total"
      :page-sizes="customPageSizes"
      @change="handlePageChange"
    />
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'

const total = ref(500)

const pager = reactive({
  currentPage: 1,
  pageSize: 50,
})

const customPageSizes = ref([20, 50, 100, 200])

const handlePageChange = (values) => {
  pager.currentPage = values.currentPage
  pager.pageSize = values.pageSize
  console.log('分页变化:', values)
}
</script>

<style scoped>
.demo-content {
  padding: 20px;
  background: #f5f5f5;
  margin-bottom: 20px;
  border-radius: 4px;
}
.demo-content p {
  margin: 5px 0;
}
</style>

:::

大数据量分页

::: demo

<template>
  <div>
    <div class="demo-content">
      <p>当前页：{{ pager.currentPage }}</p>
      <p>每页条数：{{ pager.pageSize }}</p>
      <p>总条数：{{ total }}</p>
    </div>
    <by-pager :current-page="pager.currentPage" :page-size="pager.pageSize" :total="total" @change="handlePageChange" />
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'

const total = ref(10000)

const pager = reactive({
  currentPage: 1,
  pageSize: 25,
})

const handlePageChange = (values) => {
  pager.currentPage = values.currentPage
  pager.pageSize = values.pageSize
  console.log('分页变化:', values)
}
</script>

<style scoped>
.demo-content {
  padding: 20px;
  background: #f5f5f5;
  margin-bottom: 20px;
  border-radius: 4px;
}
.demo-content p {
  margin: 5px 0;
}
</style>

:::

API

Props

参数	说明	类型	默认值
currentPage	当前页码	number	1
pageSize	每页条数	number	25
total	总条数	number	-
pageSizes	每页条数选项	array	[10, 15, 20, 25, 30, 50, 100]

Events

事件名	说明	回调参数
change	分页变化时触发	(values: PagerConfig)

PagerConfig 数据结构

属性	说明	类型	默认值
currentPage	当前页码	number	-
pageSize	每页条数	number	-