配置当前页
配置每页条数
页面改变、每页条数改变都触发回调

封装分页 Pagination.vue

<template><el-paginationbackgroundv-bind="$attrs":page-sizes="pageSizes"v-model:current-page="page"v-model:page-size="pageSize":total="total":layout="layout"@size-change="handleSizeChange"@current-change="handleCurrentChange"/>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";const props = defineProps({pageSizes: {type: Array,default() {return [20, 30, 50, 100];},},total: {type: Number,default: 0,required: true,},currentPage: {type: Number,default: 1,},currentSize: {type: Number,default: 20,},layout: {type: String,default: "total, sizes, prev, pager, next, jumper",},
});const emit = defineEmits(["update:currentPage","update:currentSize","pagination",
]);const page = computed({get() {return props.currentPage;},set(val) {emit("update:currentPage", val);},
});const pageSize = computed({get() {return props.currentSize;},set(val) {emit("update:currentSize", val);},
});const handleSizeChange = () => {page.value = 1;emit("pagination");
};
const handleCurrentChange = () => {emit("pagination");
};watch(() => props.total,() => {// 翻页组件，删除数据后，当前页码大于总页码，需要回退到总页码if (props.currentPage > 1 &&props.total < (props.currentPage - 1) * props.currentSize + 1) {handleChange();}}
);
const handleChange = () => {page.value--;$emit("pagination");
};
</script>
<style lang="scss" scoped></style>

调用组件示例

<template><Pagination:total="total"v-model:currentPage="queryParams.currentPage"v-model:currentSize="queryParams.currentSize"@pagination="handleGetTableData"/>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";const total = ref(100);
const queryParams = ref({currentPage: 2,currentSize: 30,
});
const handleGetTableData = () => {ElMessage.success(`当前页：${queryParams.value.currentPage}，每页条数：${queryParams.value.currentSize}`);console.log(queryParams.value);
};
</script>
<style lang="scss" scoped></style>