# lc-vue-auto-pagination

基于 element-plus 自动数据获取/分页组件

## 安装

```
npm i lc-vue-auto-pagination
```

## 依赖

- vue@3.x
- element-plus@2.x

## Demo

[demo](https://unpkg.com/lc-vue-auto-pagination/docs/.vitepress/dist/index.html)


## 基本用法

```vue
<script setup>
  import { AutoPagination } from 'lc-vue-auto-pagination'
  import { ref,onMounted } from 'vue'

  const pagination = ref();

  onMounted(() => {
    pagination.value.goFirstPage();
  })

  const fetchData = ({ pageNo, pageSize }) =>{
    return  {list: [{name: '张三', age: 18}, {name: '李四', age: 19}], total: 100}
  }
</script>


<template>
  <div style="height: 400px;">
    <AutoPagination :fetch-data="fetchData" ref="pagination">
      <template #default="{data, indexMethod}">
        <el-table :data="data">
          <el-table-column type="index" :index="indexMethod"></el-table-column>
          <el-table-column prop="name" label="姓名"></el-table-column>
          <el-table-column prop="age" label="年龄"></el-table-column>
        </el-table>
      </template>
    </AutoPagination>
  </div>
</template>
```

## Api

### Props

| 属性名 | 说明 | 类型 | 默认值 |
| ---- | ---- | ---- | ---- |
| fetchData | 数据获取 | (option?:\{pageNo:number, pageSize: number\})=>\{list: any[], total: number \} | () => (\{ list: [], total: 0 \}) |
| pageSizes | 每页数量可选列表 | number[] | [10, 20, 50, 100] |
| defaultPageSize | 默认每页数量 | number | 20 |
| prePageChanged | 页面切换前校验 | (newVal:number, oldVal:number)=>boolean | () => true |
| noPagination | 是否无翻页场景 | boolean | false |
| autoInit | 是否自动调用fetchData | boolean | false |


## Slots

| 插槽名 | 说明 | 参数 |
| ---- | ---- | ---- | 
| default | 自定义内容 | \{data:any[], total: number, pageSize: number, currentPage: number, indexMethod: (index: number) => number \} |

## Exposes

| 名称 | 描述 | 类型 |
| ---- | ---- | ---- |
| refresh | 刷新数据 | ()=>void |
| goFirstPage | 跳转第一页 | ()=>void |
| goLastPage | 跳转最后一页 | ()=>void |
| goNextPage | 跳转下一页 | ()=>void |
| goPrevPage | 跳转前一页 | ()=>void |
| go | 跳转指定页 | (pageNumber: number) => void |