SOURCE

# BasePagination 分页

当数据量过多时，使用分页分解数据

## 基础用法

:::demo

```vue
<template>
  <!-- <p @click="clickChangePageNo">改变页码</p> -->
  <p @click="clickChangePageSize">改变单页数</p>
  <BasePagination
    v-model:pageNo="pageNo"
    :total="total"
    v-model:pageSize="pageSize"
    @pageNoChange="pageNoChange"
    @pageSizeChange="pageSizeChange"
  />
</template>

<script>
import { defineComponent, ref } from 'vue'
export default defineComponent({
  setup() {
    const pageNo = ref(1)
    const pageSize = ref(25)
    const total = ref(110)
    const clickChangePageNo = () => {
      pageNo.value = pageNo.value > 1 ? 1 : 3
      console.error('clickChangePageNo', pageNo.value)
    }
    const clickChangePageSize = () => {
      pageSize.value = pageSize.value > 10 ? 10 : 50
      console.error('clickChangePageSize', pageNo.value, pageSize.value)
    }
    return {
      clickChangePageNo,
      clickChangePageSize,
      total,
      pageNo,
      pageSize
    }
  }
})
</script>
```

:::

## 组件 API

| 属性名 | 说明 | 类型                    | 可选值 | 默认值 |
| :----- | :--- | :---------------------- | :----- | :----- |
| xxx    | xxx  | string                  | --     | /      |
| xxx    | xxx  | Array<[xxx](#xxx-属性)> | --     | []     |

## xxx 属性

| 属性名 | 说明          | 类型   | 可选值 | 默认值 |
| :----- | :------------ | :----- | :----- | :----- |
| xxx    | xxx（必传项） | string | --     |        |

## 组件 插槽

| 属性名  | 说明           | 子标签 |
| :------ | :------------- | :----- |
| default | 默认内容       | --     |
| item    | 自定义子项内容 | --     |

## 组件 方法

## 组件 事件

## 组件 对外暴露的变量

## 组件 对外暴露的方法