基于vue3和elementPlus的分页组件封装 CommonPagination.vue组件<template> <div class="pagination-container"> <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 50]" :total="total" :background="true" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange" /> </div> </template> <script setup> import { ref, watch } from 'vue' const props = defineProps({ total: { type: Number, required: true }, // 初始页码 page: { type: Number, default: 1 }, // 初始每页条数 limit: { type: Number, default: 10 } }) const emit = defineEmits(['update:page', 'update:limit', 'pagination']) const currentPage = ref(props.page) const pageSize = ref(props.limit) // 监听父组件传入的页码和每页条数变化 watch(() => props.page, (newVal) => { currentPage.value = newVal }) watch(() => props.limit, (newVal) => { pageSize.value = newVal }) // 每页条数改变 const handleSizeChange = (val) => { emit('update:limit', val) emit('pagination', { page: currentPage.value, limit: val }) } // 页码改变 const handleCurrentChange = (val) => { emit('update:page', val) emit('pagination', { page: val, limit: pageSize.value }) } </script> <style scoped> .pagination-container { padding: 15px 0; display: flex; justify-content: flex-end; } </style> 父组件调用 father.vue<template> <CommonPagination v-model:page="queryParams.page" v-model:limit="queryParams.limit" :total="total" @pagination="getList" /> </template> <script setup> import { ref, reactive } from 'vue' import CommonPagination from './CommonPagination.vue' const queryParams = reactive({ page: 1, //当前页 limit: 10, //默认条数1页10条 // 其他查询参数... }) const total = ref(0) //总条数 //请求方法getList const getList = async ({ page, limit } = queryParams) => { try { //1、调接口将分页的参数传进去（有其它参数后面加） const res = await API //2、获取到的数据总页数赋值给total，获取到的data数据赋值给列表变量即可 } catch (error) { console.error(error) ElMessage.error('获取数据失败') } } </script>{lamp/}{callout color="#f0ad4e"} 没安装elementplus记得先安装 npm install elementplus ,并在main.js中use完成注册，即可看到封装好的分页组件 {/callout}