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
: 跳转页码输入框->
: 右对齐分隔符,右侧内容将右对齐