vue3 使用 Element-plus 的 el-pagination 分页组件时无法显示中文
问题

使用element-puls 的分页组件时,显示的是英文。
这是因为Element Plus components 默认使用英文。


解决方法

官方文档提供两种使用中文的方法:进入文档国际化 | Element Plus.

使用全局配置项

官方文档上的是整体加载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>

语言切换成功

 

————————————————
版权声明:本文为CSDN博主「来杯卡布奇洛」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/lan123456_/article/details/120992462

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐