基于ElementPlus二次封装组件-----分页器

1. 分页组件

        由于在开发过程中，我们在后台管理系统中每次都会遇到对应的列表，因此就会有与之对应的分页组件。为了保证系统的一致性，在这里我们就将对应的分页器封装为对应的组件。

2.封装属性

        这里我们采取TS来进行协助封装，封装的属性大致分为如下。当前页，每页展示的条数，修改当前页的方法，修改每页展示的条数的方法，总条数，修改每页展示条数的数组等几个比较核心的属性。由于是父子组件，这里采取的是通过props和emit来进行父子间的信息通行。

3.相关代码

        下面是对应分页器相关的数组，其功能作用适用于大多数常见的列表，比较实用。且也统一了分页器的相关内容

<script lang="ts" setup name="paginationPage">
import { ref } from 'vue'
interface PropsType {
    current:number,
    pageTotal:number,
    pageSize:number,
    sizeList:number[],
}

// 其中针对的每一项都是如下， 当前页 总页数 每页条数 决定每页条数的列表
const {current,pageTotal,pageSize,sizeList}  = defineProps<PropsType>()

// 自定义一个上下文交流，用来我们进行子组件传递父组件的数据。
const emits = defineEmits<{
   (event: 'handlePageChange',current:number): void,
   (event: 'handlePageSizeChange',pageSize:number):void
}>()


const currentPage = ref<number>(current)  // 当前页
const total = ref<number>(pageTotal)      //总页数
const size = ref<number>(pageSize)        //每页对应的条数
const list = ref<number[]>(sizeList)      //修改页数的数组


const handleSizeChange = (val: number) => {
   emits('handlePageSizeChange',val)
}
const handleCurrentChange = (val: number) => {
   emits('handlePageChange',val)
}
</script>

<template>
   <div class="page-main">
      <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="size"
      :page-sizes="list"
      layout="prev, pager, next, jumper,sizes"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"/>
   </div>
</template>


<style lang="less" scoped>
.page-main{
   display: flex;
   flex-direction: row-reverse;
   justify-content: center;
   align-items: center;
   margin-top: 20px;
}
</style>

        下面是根据对应封装的组件，调用或者传递对应参数的父组件的代码。这样虽然比直接使用分页器在组件中会相对的比较麻烦，但是却减少了代码量并且也统一了风格，避免出现分页器不规范的情况。

<pagination-page @handlePageChange="handlePageChange" @handlePageSizeChange="handlePageSizeChange"  
:current="1" :pageTotal="100" :pageSize="10" :sizeList="[10,20,30,50]"/>

4.总结

        虽然我们使用了elementPlus，但是也可以根据我们实际的需求，来进行统一风格的封装。这样也有利于我们对实际项目开发统一规范。也学习了比较深入的组件间的相互交流。也有利于我们相关的学习。