Vue+ElementUi分页组件封装及运用

一、分页组件
<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>