完整讲解分页组件 el-config-provider 中文国际化 靠右布局需求回顾封装公共分页组件CommonPagination.vue分页文字中文共 xx 条、每页、前往分页整体靠右展示Vue3 Element Plus Vite 按需引入JS 版本和我们之前useTableQuery对象包裹的表格组合式函数配套使用核心知识点❌el-pagination本身不支持直接传:locale这个是踩坑点你刚才就是这么写不生效✅ Element Plus 全局 / 局部国际化必须用el-config-provider包裹组件传入locale语言包。只要被这个标签包裹内部所有 Element 组件自动切换语言。一、完整组件代码 CommonPagination.vuetemplate !-- 分页外层容器控制靠右、上边距 -- div classcommon-pagination !-- 国际化包裹容器内部所有el组件自动中文 -- el-config-provider :localezhCn el-pagination v-model:current-pageinnerPageNum v-model:page-sizeinnerPageSize :page-sizes[10, 20, 50, 100] :totaltotal layouttotal, sizes, prev, pager, next, jumper size-changehandleChange current-changehandleChange / /el-config-provider /div /template script setup import { computed } from vue // 引入element-plus中文语言包官方标准路径 import zhCn from element-plus/es/locale/lang/zh-cn // 定义props接收父组件传过来的分页参数 const props defineProps({ total: { type: Number, default: 0 }, pageNum: { type: Number, default: 1 }, pageSize: { type: Number, default: 10 } }) // 定义emit通知父组件分页发生变化 const emit defineEmits([update:pageNum, update:pageSize, change]) // 计算属性包装pageNum实现v-model双向绑定 const innerPageNum computed({ get() { // 获取取父组件传过来的pageNum return props.pageNum }, set(val) { // 修改触发事件传给父组件更新pageNum emit(update:pageNum, val) } }) // 计算属性包装pageSize实现v-model双向绑定 const innerPageSize computed({ get() { return props.pageSize }, set(val) { emit(update:pageSize, val) } }) // 分页改变统一触发事件父组件可以监听change重新请求列表 const handleChange () { emit(change) } /script style scoped .common-pagination { margin-top: 16px; /* flex布局子元素靠右 */ display: flex; justify-content: flex-end; } /style二、逐段拆解讲解1. template 模板部分div classcommon-pagination el-config-provider :localezhCn el-pagination ... / /el-config-provider /div外层div.common-pagination布局容器负责上边距 靠右el-config-provider :localezhCn作用给它内部所有 Element Plus 组件注入中文语言包只要在这个标签里面el-pagination、el-table、el-dialog 都会中文zhCn我们导入的中文语言对象el-pagination分页组件v-model:current-pageinnerPageNum当前页码v-model:page-sizeinnerPageSize每页条数:page-sizes[10,20,50,100]下拉可选每页数量:totaltotal数据总条数layouttotal, sizes, prev, pager, next, jumper控制分页显示哪些模块size-change/current-change页码、每页条数变化触发⚠️ 重要el-pagination 上删掉:localezhCn这个属性在分页组件无效语言交给外层el-config-provider。2. script setupimport zhCn from element-plus/es/locale/lang/zh-cn导入官方中文语言包JS 项目无类型报错。const props defineProps({ total, pageNum, pageSize })父组件使用分页组件时需要传入这 3 个参数总条数、当前页、每页大小。const emit defineEmits([update:pageNum, update:pageSize, change])update:pageNum页码更新给父组件update:pageSize每页条数更新给父组件change统一事件父组件监听这个事件重新调用getList()获取列表const innerPageNum computed({get, set})Vue3 组件封装双向绑定标准写法get读取父传进来的值set修改的时候触发 emit 通知父组件更新不能直接修改 props3. style 样式.common-pagination { margin-top: 16px; display: flex; justify-content: flex-end; }margin-top:16px分页和表格之间留出间距display:flex; justify-content:flex-end内部分页整体靠右比 text-align:right 更稳定三、父页面如何使用这个分页组件和 useTableQuery 对象包裹配套父页面列表页面template PageCard title列表 !-- 搜索区域 -- el-form :modeltable.queryParams inline el-form-item label标题 el-input v-modeltable.queryParams.title placeholder请输入标题 clearable / /el-form-item el-form-item el-button typeprimary clicktable.getList查询/el-button el-button clicktable.resetQuery重置/el-button /el-form-item /el-form !-- 表格 -- el-table :datatable.tableData border el-table-column label名称 propname / /el-table !-- ✅ 使用封装好的分页组件 -- CommonPagination :totaltable.total :page-numtable.queryParams.pageNum :page-sizetable.queryParams.pageSize changetable.getList / /PageCard /template script setup // 引入封装好的分页 import CommonPagination from /components/CommonPagination.vue // 引入表格组合式函数对象包裹版本 import { useTableQuery } from /composables/useTableQuery.js // 你的接口函数 import { getEmailList } from /api/email.js // 对象包裹所有表格相关数据、方法全部放在 table 对象内 const table useTableQuery({ pageNum: 1, pageSize: 10, title: }, getEmailList) // 页面加载自动查询 table.getList() /script父组件调用说明CommonPagination :totaltable.total :page-numtable.queryParams.pageNum :page-sizetable.queryParams.pageSize changetable.getList /total接口返回总数量page-num当前页码来自table.queryParams.pageNumpage-size每页条数change分页切换触发table.getList()重新请求数据四、useTableQuery.js对象包裹版本复习import { reactive, ref } from vue export function useTableQuery(initQuery, apiFun) { const queryParams reactive({ ...initQuery }) const tableData ref([]) const total ref(0) const getList async () { const res await apiFun(queryParams) tableData.value res.data?.records || [] total.value res.data?.total || 0 } const resetQuery () { Object.assign(queryParams, initQuery) queryParams.pageNum 1 getList() } // 返回一个完整对象不解构保持项目风格统一 return { queryParams, tableData, total, getList, resetQuery } }五、效果分页整体靠右文字中文共5条、每页10条、前往切换页码 / 每页条数自动触发接口重新加载列表组件复用所有列表页面直接引入CommonPagination六、可选全局一次性中文推荐如果你想整个项目所有 Element 组件全部中文不需要每个分页组件单独写 el-config-provider。修改 App.vuetemplate el-config-provider :localezhCn router-view / /el-config-provider /template script setup import zhCn from element-plus/es/locale/lang/zh-cn /script全局配置之后CommonPagination.vue 里面的el-config-provider就可以删掉了。你可以先把 CommonPagination.vue 替换成上面完整代码保存刷新看分页是否变成中文并且靠右。运行成功后我们下一步测试分页切换检查列表数据是否正常刷新。