今天在vue3的项目中使用到了element-ui-plus,在调用组件的时候发现渲染出来的默认都是英文版,对于我来说主要还是中文为主(还是因为英语太烂了。

方法1: 全局引入

main.js文件:

1
2
3
4
5
6
//怎么按需修改中文
import ElementPlus from 'element-plus';
import locale from "element-plus/lib/locale/lang/zh-cn";//需要新加的代码

const app = createApp(App);
app.use(ElementPlus, {locale});//需要改变的地方,加入locale

方法2:按需引入

在某个组件中修改

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<template>
<el-pagination
:locale="locale"
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage4"
:page-sizes="[20, 50, 100, 200]"
:page-size="20"
layout="->,total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</template>

<script setup>
import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/lib/locale/lang/zh-cn';

const { locale } = reactive({
locale: zhCn,
});
</script>