关于Vue3中 使用ElementUI Plus 的分页,日期选择器等组件没有中文的解决办法

ElementUI Plus使用中文版分页功能

 

 

• 问题

  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 组件(setup函数式写法)

    可以使用 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>

     

  •  使用 ConfigProvider 组件(setup语法糖写法)

    //App.vue
    <script lang="ts" setup>
    import { ref } from "vue";
    //引入下面一项
    import zhCn from "element-plus/lib/locale/lang/zh-cn";
    //定义 locale
    const locale = ref(zhCn);
    
    </script>
    
    <template>
       //记得加 :locale="locale"
        <el-config-provider :locale="locale">
          <router-view></router-view>
        </el-config-provider>
    
    </template>
    
    <style>
    
    </style>

  • ! 推荐:也可以简写为(setup语法糖写法)

    //App.vue
    <script lang="ts" setup>
    import { ref } from "vue";
    //引入下面一项
    import zhCn from "element-plus/lib/locale/lang/zh-cn";
    
    
    </script>
    
    <template>
       //改为 :locale="zhCn"
        <el-config-provider :locale="zhCn">
          <router-view></router-view>
        </el-config-provider>
    
    </template>
    
    <style>
    
    </style>

  •  

• 语言切换成功