create-base-teek-theme/dist/template/docs/articles/使用指南/05.Form表单组件/05.pagination.md

### npm ``` npm create base-teek-theme@latest my-first-blog ```

---
date: 2025-03-27 00:31:18
title: pagination
permalink: /pages/3dccbb
tags:
  - vue组件
author:
  name: 华总
  link: https://xiaoying.org.cn
categories:
  - 使用指南
  - Form 表单组件

---





## 说明

分页组件

## 使用

```vue
<template>
    ...
    <Pagination
      v-model:limit="page.pageSize"
      v-model:page="page.current"
      :total="total"
      @pagination="getUser"
    >
    </Pagination>
    ...
  </div>
</template>

<script lang="ts" setup>
import { Pagination } from "liyao-vue-common"

const page: Record<string, any> = ref<UserQueryRequest>({
  current: 1,
  pageSize: 10
});

let total: number;

onMounted(() => {
  getUser();
});

 
function getUser() {
  return new Promise((resolve) => {
     // 后端获取数据接口...
    UserControllerService.listPageVo(page.value).then((res) => {
      ...
      total = parseInt(res.data?.total);
      ...
    });
  });
}

</script>

```