vue3 使用 Element-plus 的 el-pagination 分页组件时无法显示中文
-
问题
使用element-puls 的分页组件时,显示的是英文。
这是因为Element Plus components 默认使用英文。
-
解决方法
官方文档提供两种使用中文的方法:进入文档.
-
使用全局配置项
官方文档上的是整体加载element-plus 时使用中文的方法,下面是按需加载的代码
// element.js import { ElButton, ElForm, ElFormItem } from 'element-plus' import lang from 'element-plus/lib/locale/lang/zh-cn' import { use as localeUse } from 'element-plus/lib/locale' export default (app) => { localeUse(lang) app.use(ElButton).use(ElForm).use(ElFormItem) } // main.js import { createApp } from 'vue' import App from './App.vue' import installElementPlus from './plugins/element' const app = createApp(App) installElementPlus(app) app.use(router).mount('#app')
-
使用 ConfigProvider 组件
可以使用 ConfigProvider 组件包裹App 组件(这个组件也可以使用在其他单独的页面上),参考文档用法就可以
// App.vue <template> <el-config-provider :locale="locale"> <router-view></router-view> </el-config-provider> </template> <script> import { ElConfigProvider } from 'element-plus' import zhCn from 'element-plus/lib/locale/lang/zh-cn' export default { name: 'App', components: { ElConfigProvider }, setup() { return { locale: zhCn } } } </script>
-
-
语言切换成功