二次封装el-pagination组件

element-plus版本：2.2.2。

element组件库中的分页组件是经常要要用到的，详细使用方法可以看一下官网。

由于该组件涉及到很多事件和属性，所以我这里进行了二次封装，项目使用起来更方便。

新建Pagination.vue组件，模版代码如下：

<template>
    <el-pagination :page-sizes="[10, 20, 30]" v-model:page-size="pageSize" 
        v-model:current-page="currentPage" background
        layout="total,sizes,prev, pager, next,jumper" 
        :page-count="props.totalPage">
    </el-pagination>
</template>

网上有些page-size和current-page可以不用双向绑定，直接父组件双向绑定pageSize和currentPage即可，实际操作并不可行，直接报错，而且根本无法加载组件，所以这里必须是v-model，其他参数根据自己需求修改吧。

ts代码如下，使用了setup语法糖和自动导入vue相关组件，可以看我之前的文章。

<script lang="ts" setup>
const props = defineProps({
    /**
    * 每页显示的数量，默认10
    */
    pageSize: {
        type: Number,
        default: 10
    },
    /**
    * 当前页码，默认1
    */
    currentPage: {
        type: Number,
        default: 1
    },
    /**
    * 总页数，默认0
    */
    totalPage: {
        type: Number,
        default: 0,
        required: true
    },
    /**
    * 分页变更后，执行的方法
    */
    loadFn:{
        type:Function,
        default:()=>{}
    }
})// 本地接收
const currentPage=ref(props.currentPage)
const pageSize=ref(props.pageSize)
const emit = defineEmits(['update:pageSize','update:currentPage'])

watch([() => currentPage.value], () => {
    emit('update:currentPage',currentPage.value)
    props.loadFn()
})
watch([ () => pageSize.value], () => {
    emit('update:pageSize',pageSize.value)
    props.loadFn()
})
</script>

由于prpo里的数据不可以修改的，所以父组件传来数据后，需要本地再接收一下，然后在通过emit的update事件，来改变props里的值。

最后父组件代码如下：

<sh-pagination v-model:currentPage="currentPage" 
    v-model:pageSize="pageSize" 
    :total="total" 
    :totalPage="totalPage" 
    :loadFn="initList"></sh-pagination>

至此完成el-pagination组件的二次封装。