珠海企业建站,东营网站建设服务,百度seo搜索,网站建设方案流程vue3 基于element plus对el-pagination进行二次封装 1、前言2、在components文件夹中新建pagination.vue文件3、在组件内使用分页 1、前言
在vue3项目中#xff0c;如果每个列表页都敲一遍分页方法#xff0c;显然是不合理的#xff0c;那么#xff0c;下面我将基于elemen… vue3 基于element plus对el-pagination进行二次封装 1、前言2、在components文件夹中新建pagination.vue文件3、在组件内使用分页 1、前言
在vue3项目中如果每个列表页都敲一遍分页方法显然是不合理的那么下面我将基于element plus对el-pagination进行二次封装使用vue3语法糖格式废话不多说开干。
2、在components文件夹中新建pagination.vue文件
templatediv classpaginationel-pagination background :layoutlayout :pager-countpagerCount :page-sizespageSizes :page-sizepageSize:totalpageTotal v-model:currentPagecurrentPages size-changesizeChange current-changecurrentprev-clickprev next-clicknext/el-pagination/div
/templatescript 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)
}
/scriptstyle scoped langless
.pagination {width: 100%;background: #fff;padding: 5px 0;text-align: center;margin: 0 auto;display: flex;flex-direction: column;align-items: center;
}
/style3、在组件内使用分页
templatepagination v-showtotalRows 0 :pageNumqueryParams.pageNum :pageSizequeryParams.pageSize :pageTotaltotalRows pageFuncpageFunc /
/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
