前端开发之Element Plus的分页组件el-pagination显示英文转变为中文

最新推荐文章于 2024-06-20 08:00:00 发布

冯浩(grow up)

最新推荐文章于 2024-06-20 08:00:00 发布

阅读量4k

点赞数 4

分类专栏： element-plus vue问题解决 vue 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/m0_50207524/article/details/130665384

版权

vue 同时被 3 个专栏收录

20 篇文章 0 订阅

订阅专栏

element-plus

10 篇文章 1 订阅

订阅专栏

vue问题解决

9 篇文章 0 订阅

订阅专栏

文章介绍了两种方法将ElementPlus的分页组件从英文语言切换为中文：一是通过在main.js中设置locale属性；二是利用ConfigProvider组件包裹App组件，并配置locale。这两种方法都涉及到引入zh-cn语言包。

摘要由CSDN通过智能技术生成

Element Plus的分页组件el-pagination显示英文转变为中文

前言
效果图
解决方案
- 1、在main.js 文件中引入elementplus 的时候添加（推荐使用，便于界面风格统一）
- 2、可以使用 ConfigProvider 组件包裹App 组件（这个组件也可以使用在其他单独的页面上）

前言

在使用element的时候分页提示语句是中文的到了element-plus中式英文的，本文讲解的就是怎样将英文转变为中文

效果图

在这里插入图片描述

解决方案

在这里插入图片描述

1、在main.js 文件中引入elementplus 的时候添加（推荐使用，便于界面风格统一）

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

app.use(ElementPlus, {
  locale: zhLocale
})

2、可以使用 ConfigProvider 组件包裹App 组件（这个组件也可以使用在其他单独的页面上）

<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>