解决 Element Plus 分页组件英文显示问题

解决 Element Plus 分页组件英文显示问题

问题描述

Element Plus 组件在不同引入方式下的默认语言表现不一致：

• 按需引入 ：默认显示英文（en），如 el-pagination 显示 "page" 而不是 "页"
• 全局引入：默认显示中文（zh-cn）

解决方案

方案一：全局引入（推荐用于小型项目）

// main.ts
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";

app.use(ElementPlus);

方案二：按需引入 + 组件级语言配置

<template>
  <!-- 使用 ElConfigProvider 包裹需要中文显示的组件 -->
  <el-config-provider :locale="zhCn">
    <el-pagination
      v-model:current-page="currentPage"
      :page-sizes="[10, 20, 50, 100]"
      :total="total"
      layout="total, sizes, prev, pager, next, jumper"
    />
  </el-config-provider>
</template>

<script setup>
import zhCn from "element-plus/es/locale/lang/zh-cn";
</script>

最佳实践

1. 大型项目：推荐使用按需引入 + 全局语言配置（方案二）
2. 小型项目：可直接使用全局引入（方案一）
3. 特定组件：使用 ElConfigProvider 包裹（方案二）