element-plus分页组件默认显示英文，设置成中文显示。

Web_Try_harder

于 2021-08-20 09:34:26 发布

阅读量9.6k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： vue3 element-plus 文章标签： vue js elementui

本文链接：https://blog.youkuaiyun.com/Web_Try_harder/article/details/119816030

vue3 同时被 2 个专栏收录

1 篇文章

订阅专栏

element-plus

1 篇文章

订阅专栏

这篇博客介绍了如何在Element Plus 1.0.2-beta.59及更高版本中将分页组件从默认的英文切换为中文。原因在于Element Plus内部默认使用英文，需要进行多语言配置。解决方案是在`app.vue`中使用`ElConfigProvider`组件，并导入相应的中文语言包，如`zh-cn`，在模板和脚本部分进行设置，以实现全局的语言切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述：

正常引入后发现分页组件默认显示的是英文，但是我们需要的是中文的。

原因分析：

是因为element-plus组件内部默认使用英语，如果需要其他语言这需要进行多语言设置。
1.0.2-beta.59（包含59）之后的更新：在 1.0.2-beta.59（包含59）之后，我们重新组织了代码，让国际化功能能够被正常的使用(不论是全引入还是按需引入），一共有两种方式在项目中使用。

¶1. 通过 ConfigProvider 的方式来使用，详细的使用方法请查阅 ConfigProvider 的文档
如果你的项目中还在使用 options API, 那么你应该使用此方法，我们更加建议用户使用该方法，因为这样会减少使用的负担，但如果你在项目中深度使用 Composition API，那么你可以使用第二种方法来为整个应用提供语言支持。

解决方案：

只需要在app.vue中使用el.config.provider包裹跟组件

<template>
  <el-config-provider :locale="locale">
    <App />
  </el-config-provider>
</template>

<script>
import { ElConfigProvider } from 'element-plus'

import zhCn from 'element-plus/lib/locale/lang/zh-cn'

defineComponent({
  components: {
    [ElConfigProvider.name]: ElConfigProvider,
  },
  data() {
    return {
      locale: zhCn,
    }
  },
})
</script>