完整讲解：分页组件 + el-config-provider 中文国际化 + 靠右布局
需求回顾
- 封装公共分页组件
CommonPagination.vue - 分页文字中文（共 xx 条、每页、前往）
- 分页整体靠右展示
- Vue3 + Element Plus + Vite 按需引入，JS 版本
- 和我们之前
useTableQuery对象包裹的表格组合式函数配套使用
核心知识点：
❌el-pagination本身不支持直接传:locale（这个是踩坑点！你刚才就是这么写不生效）
✅ Element Plus 全局 / 局部国际化必须用<el-config-provider>包裹组件，传入locale语言包。
只要被这个标签包裹，内部所有 Element 组件自动切换语言。
一、完整组件代码 CommonPagination.vue
<template> <!-- 分页外层容器：控制靠右、上边距 --> <div class="common-pagination"> <!-- 国际化包裹容器：内部所有el组件自动中文 --> <el-config-provider :locale="zhCn"> <el-pagination v-model:current-page="innerPageNum" v-model:page-size="innerPageSize" :page-sizes="[10, 20, 50, 100]" :total="total" layout="total, sizes, prev, pager, next, jumper" @size-change="handleChange" @current-change="handleChange" /> </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 class="common-pagination"> <el-config-provider :locale="zhCn"> <el-pagination ... /> </el-config-provider> </div>- 外层
div.common-pagination：布局容器，负责上边距 + 靠右 <el-config-provider :locale="zhCn">- 作用：给它内部所有 Element Plus 组件注入中文语言包
- 只要在这个标签里面：el-pagination、el-table、el-dialog 都会中文
zhCn：我们导入的中文语言对象
<el-pagination>分页组件v-model:current-page="innerPageNum"当前页码v-model:page-size="innerPageSize"每页条数:page-sizes="[10,20,50,100]"下拉可选每页数量:total="total"数据总条数layout="total, sizes, prev, pager, next, jumper"控制分页显示哪些模块@size-change/@current-change：页码、每页条数变化触发
⚠️ 重要：el-pagination 上删掉
:locale="zhCn"，这个属性在分页组件无效！语言交给外层el-config-provider。
2. script setup
import 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 通知父组件更新，不能直接修改 props！
3. 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 :model="table.queryParams" inline> <el-form-item label="标题"> <el-input v-model="table.queryParams.title" placeholder="请输入标题" clearable /> </el-form-item> <el-form-item> <el-button type="primary" @click="table.getList">查询</el-button> <el-button @click="table.resetQuery">重置</el-button> </el-form-item> </el-form> <!-- 表格 --> <el-table :data="table.tableData" border> <el-table-column label="名称" prop="name" /> </el-table> <!-- ✅ 使用封装好的分页组件 --> <CommonPagination :total="table.total" :page-num="table.queryParams.pageNum" :page-size="table.queryParams.pageSize" @change="table.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 :total="table.total" :page-num="table.queryParams.pageNum" :page-size="table.queryParams.pageSize" @change="table.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.vue：
<template> <el-config-provider :locale="zhCn"> <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 替换成上面完整代码，保存刷新，看分页是否变成中文并且靠右。
运行成功后，我们下一步：测试分页切换，检查列表数据是否正常刷新。
