一、分页组件
<template>
<div class="block" style="margin-top:10px;">
<el-pagination
style="display: flex;justify-content: center;"
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="pageSizes"
:page-size="pageRes.size"
layout="total, sizes, prev, pager, next, jumper"
:total="pageRes.total">
</el-pagination>
</div>
</template>
<script>
import {ref,toRefs} from "vue";
import { ElMessage } from "element-plus";
export default {
props:[
"pageRes",
"pageInfo",
],
data(){
return{
pageSizes:[
10,15,20,25,30,40,50,100,150,200
]
}
},
setup(props,context){
//分页查询结果
const pageRes = toRefs(props).pageRes;
if(pageRes.value == undefined){
ElMessage.warning("请配置数据结果")
}
const currentPage = ref(pageRes.value.current)
//分页查询参数
const pageInfo = toRefs(props).pageInfo;
//切换每页大小事件
const handleSizeChange = (pageSize)=>{
if(pageInfo.value == undefined){
ElMessage.warning("请配置分页参数")
return
}
pageInfo.value.size = pageSize
if(pageInfo.value.current == undefined){
pageInfo.value.current = 1
}
//分页查询操作结果回调
context.emit("callBack",pageInfo)
}
//切换当前页事件
const handleCurrentChange = (current)=>{
currentPage.value = current
if(pageInfo.value == undefined){
ElMessage.warning("请配置分页参数")
return
}
pageInfo.value.current = current
if(pageInfo.value.size == undefined){
pageInfo.value.size = 15
}
//分页查询操作结果回调
context.emit("callBack",pageInfo)
}
return {
currentPage,
handleSizeChange,
handleCurrentChange
}
}
}
</script>
<style scoped>
</style>
二、组件运用
<template> <pagination :pageRes="pageResult" :pageInfo="searchCondtion" @callBack="callBackFun"></pagination> </template> <script setup> import {ref} from 'vue'; //查询条件 const searchCondtion = ref({ size:15, current:1, username:'' }) //分页查询结果 let pageResult= reactive({}) //分页操作回调 const callBackFun = (pageInfo) => { loading.value = true; proxy.$axios .post("user/queryPage", searchCondtion.value) .then((res) => { pageResult= res.data; //分页查询结果处理 ...... }) .catch( err => { //异常处理 ...... }) } <template>