分页组件 + el-config-provider 中文国际化 + 靠右布局

完整讲解：分页组件 + el-config-provider 中文国际化 + 靠右布局

需求回顾

1. 封装公共分页组件 CommonPagination.vue
2. 分页文字中文（共 xx 条、每页、前往）
3. 分页整体靠右展示
4. Vue3 + Element Plus + Vite 按需引入，JS 版本
5. 和我们之前 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>

1. 外层 div.common-pagination：布局容器，负责上边距 + 靠右
2. <el-config-provider :locale="zhCn">
   • 作用：给它内部所有 Element Plus 组件注入中文语言包
   • 只要在这个标签里面：el-pagination、el-table、el-dialog 都会中文
   • zhCn：我们导入的中文语言对象
3. <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.pageNum
• page-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
  }
}

五、效果

1. 分页整体靠右
2. 文字中文：共5条、每页10条、前往
3. 切换页码 / 每页条数，自动触发接口重新加载列表
4. 组件复用，所有列表页面直接引入 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 替换成上面完整代码，保存刷新，看分页是否变成中文并且靠右。

运行成功后，我们下一步：测试分页切换，检查列表数据是否正常刷新。