vue3 基于element plus对el-pagination进行二次封装

1、前言

在vue3项目中，如果每个列表页都敲一遍分页方法，显然是不合理的，那么，下面我将基于element plus对el-pagination进行二次封装，使用vue3语法糖格式，废话不多说，开干。

2、在components文件夹中新建pagination.vue文件

<template><div class="pagination"><el-pagination background :layout="layout" :pager-count="pagerCount" :page-sizes="pageSizes" :page-size="pageSize":total="pageTotal" v-model:currentPage="currentPages" @size-change="sizeChange" @current-change="current"@prev-click="prev" @next-click="next"></el-pagination></div>
</template><script setup>
import { ref, reactive, onMounted } from "vue"
const props = defineProps({pageTotal: {type: Number,default: 0, //总页数},pagerCount: {type: Number,default: 5, //如果页数很多大概展示的页码},layout: {type: String,default: "total,sizes, prev, pager, next, jumper, ->, slot", //分页组件会展示的功能项},pageSizes: {type: Array,default: () => {return [10, 20, 50, 100] //指定分页展示条数},},currentPage: {type: Number,default: 1, //指定跳转到多少页},pageSize: {type: Number,default: 10, //每页展示的条数，根据自己实际，且会带入请求},pageNum: {type: Number,default: 1, //第几页数据，根据自己实际，且会带入请求},
})let currentPages = ref(props.currentPage)
let pageData = reactive({pageSize: props.pageSize,pageNum: props.pageNum,
})const emit = defineEmits(["pageFunc"])//选择每页显示数量 Change page size
const sizeChange = (val) => {pageData.pageSize = valemit("pageFunc", pageData)
}
//选择某一页
const current = (val) => {pageData.pageNum = currentPages.valueemit("pageFunc", pageData)
}
//上一页
const prev = () => {pageData.pageNum = pageData.pageNum - 1emit("pageFunc", pageData)
}
//下一页
const next = () => {pageData.pageNum = pageData.pageNum + 1emit("pageFunc", pageData)
}
</script><style scoped lang="less">
.pagination {width: 100%;background: #fff;padding: 5px 0;text-align: center;margin: 0 auto;display: flex;flex-direction: column;align-items: center;
}
</style>

3、在组件内使用分页

<template><pagination v-show="totalRows > 0" :pageNum="queryParams.pageNum" :pageSize="queryParams.pageSize" :pageTotal="totalRows" @pageFunc="pageFunc" />
</template>
<script setup>
import { reactive, ref } from 'vue'
// 引入分页组件
import Pagination from '@/components/pagination.vue'
// 查询参数
const queryParams = reactive({pageNum: 1,pageSize: 10,organId: '',projectName: '',projectStatus: '',projectLeader: '',
})
// 项目总条数
const totalRows = ref(0)
// 分页回调
const pageFunc = (data) => {queryParams.pageSize = data.pageSizequeryParams.pageNum = data.pageNum// 触发获取项目数据函数getProjectList()  
}
</script>