Pagination 分页

基于 Element Plus Pagination 封装的分页组件，简化分页参数绑定。

💡 使用场景：在 CURD 组件内部使用，通常无需手动引用。详见 CURD 组件。

基本用法

<template>
  <el-table :data="tableData">
    <!-- 表格列 -->
  </el-table>
  
  <Pagination
    v-model:page="queryParams.pageNum"
    v-model:limit="queryParams.pageSize"
    :total="total"
    @pagination="handlePagination"
  />
</template>

<script setup lang="ts">
const queryParams = reactive({
  pageNum: 1,
  pageSize: 10
})
const total = ref(0)
const tableData = ref([])

function handlePagination() {
  fetchData()
}

async function fetchData() {
  const res = await UserAPI.getPage(queryParams)
  tableData.value = res.list
  total.value = res.total
}
</script>

Props

参数	说明	类型	默认值
page	当前页码（支持 v-model）	number	1
limit	每页条数（支持 v-model）	number	10
total	总条数	number	0
pageSizes	每页条数选项	number[]	[10, 20, 30, 50]
layout	组件布局	string	'total, sizes, prev, pager, next, jumper'
background	是否显示背景色	boolean	true
autoScroll	分页后是否自动滚动到顶部	boolean	true
hidden	只有一页时是否隐藏	boolean	false

Events

事件名	说明	回调参数
pagination	页码或每页条数变化时触发	{ page: number, limit: number }

功能特性

• ✅ 双向绑定页码和每页条数
• ✅ 自动滚动到顶部
• ✅ 单页自动隐藏
• ✅ 背景色样式

相关链接

• Element Plus Pagination