二次封装element Plus的分页组件

效果图

子组件

<template>
      <el-pagination  
      :current-page="pageNo"
      background
     :page-size="pageNum"
      :page-sizes="[5,10, 20, 30]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
</template>

<script setup>
import { defineProps, defineEmits} from "vue";
const emits = defineEmits(["handleSizeChange", "handleCurrentChange"]);
const props = defineProps({
  pageNo:{
    default:1
  },
    pageNum:{
        default:10
    },
  // 总页数
  total: {
    required: true,
    default: 0,
  },
});
// 页数改变的时候触发的事件
const handleSizeChange = (val) => {
  emits("handleSizeChange", val);
};
// 当前页改变的时候触发的事件
const handleCurrentChange = (val) => {
  emits("handleCurrentChange", val);
};
</script>

父组件

1.template部分

<div class="paginationd">
      <Pagination
        :total="total"
        :pageNo="page.pageNo"
        :pageNum="page.pageNum"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      />
    </div>

2.javaScript部分

import Pagination from "@/components/Pagination/index.vue";
const total = ref(0); // 总条数
// 分页改变事件
const handleSizeChange = (val) => {
  page.value.pageNum = val;
  requestAPI();
};
// 当前页改变事件
const handleCurrentChange = (val) => {
  page.value.pageNo = val;
  requestAPI();
};
const data = reactive({
  page: {
    pageNo: 1,
    pageNum: 10,
  },
});

const {page} = toRefs(data);
// 渲染
const requestAPI = () => {
  getAuditTypeList(page.value.pageNo, page.value.pageNum).then((res) => {
    if (res.code == "200") {
      tableData.value = res.data.data;
      total.value = res.data.count;
    }
  });
};