Pagination 分页

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

基础用法

<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 }