zx-pagination 分页组件

一个功能完善的分页组件，支持多种布局组合和样式定制。

基本用法

<template>
  <zx-pagination
    v-model:current-page="currentPage"
    v-model:page-size="pageSize"
    :total="total"
    @current-change="handleCurrentChange"
  />
</template>

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

const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(100)

const handleCurrentChange = (page) => {
  console.log(`当前页: ${page}`)
}
</script>

不同尺寸

<template>
  <zx-pagination :total="50" size="small" />
  <zx-pagination :total="50" />
  <zx-pagination :total="50" size="large" />
</template>

带背景色的分页

<template>
  <zx-pagination :total="50" background />
</template>

完整功能示例

<template>
  <zx-pagination
    v-model:current-page="currentPage"
    v-model:page-size="pageSize"
    :total="total"
    :page-sizes="[10, 20, 30, 50]"
    :background="true"
    layout="total, prev, pager, next, jumper"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>

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

const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(100)

const handleSizeChange = (size) => {
  console.log(`每页 ${size} 条`)
}

const handleCurrentChange = (page) => {
  console.log(`当前页: ${page}`)
}
</script>

属性

属性	说明	类型	可选值	默认值
size	分页组件大小	String	large/default/small	default
background	是否为分页按钮添加背景色	Boolean	—	false
page-size	每页显示条目个数	Number	—	10
default-page-size	每页默认的条目个数	Number	—	10
total	总条目数	Number	—	0
page-count	总页数，与 total 设置任意一个就可以达到显示页码的功能	Number	—	0
pager-count	页码按钮的数量，当总页数超过该值时会折叠	Number	大于等于 5 且小于等于 21 的奇数	7
current-page	当前页数	Number	—	1
default-current-page	当前页数的默认值	Number	—	1
layout	组件布局，子组件名用逗号分隔	String	sizes, prev, pager, next, jumper, ->, total	prev, pager, next, jumper, ->, total
page-sizes	每页显示个数选择器的选项设置	Array	—	[10, 20, 30, 40, 50, 100]
prev-text	替代图标显示的上一页文字	String	—	""
next-text	替代图标显示的下一页文字	String	—	""
disabled	是否禁用分页	Boolean	—	false
hide-on-single-page	只有一页时是否隐藏	Boolean	—	false

事件

事件名称	说明	回调参数
update:current-page	当前页改变时触发（支持 v-model:current-page）	新的页码
update:page-size	每页条数改变时触发（支持 v-model:page-size）	新的每页条数
size-change	每页条数改变时触发	新的每页条数
current-change	当前页改变时触发	新的页码
prev-click	点击上一页按钮时触发	新的页码
next-click	点击下一页按钮时触发	新的页码
change	当前页码或每页条数变化时触发	当前页码, 当前每页条数

布局

通过设置 layout 属性，可以灵活地组合分页组件的各个部分：

total: 显示总条目数
sizes: 每页显示条目数选择器
prev: 上一页按钮
pager: 页码按钮
next: 下一页按钮
jumper: 跳转页码输入框
->: 右对齐分隔符，右侧内容将右对齐

Package detail

@tanzhenxing/zx-pagination

readme

基本用法

不同尺寸

带背景色的分页

完整功能示例

属性

事件

布局