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

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>
    

• 语言切换成功