1、前言
在vue3项目中,如果每个列表页都敲一遍分页方法,显然是不合理的,那么,下面我将基于element plus对el-pagination进行二次封装,使用vue3语法糖格式,废话不多说,开干。文章来源地址https://www.toymoban.com/news/detail-662422.html
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 = val
emit("pageFunc", pageData)
}
//选择某一页
const current = (val) => {
pageData.pageNum = currentPages.value
emit("pageFunc", pageData)
}
//上一页
const prev = () => {
pageData.pageNum = pageData.pageNum - 1
emit("pageFunc", pageData)
}
//下一页
const next = () => {
pageData.pageNum = pageData.pageNum + 1
emit("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.pageSize
queryParams.pageNum = data.pageNum
// 触发获取项目数据函数
getProjectList()
}
</script>
文章来源:https://www.toymoban.com/news/detail-662422.html
到了这里,关于vue3 基于element plus对el-pagination进行二次封装的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!