element plus 日期组件默认为英语,修改为中文的方法
项目需要使用日期选择组件,使用el-date-picker日期组件,结果打开一看默认为英语。未修改前的代码如下<template><div style="padding: 100px">日期:<el-date-pickerv-model="value1"type="date"placeholder="选择日期"format="YYYY/MM/DD"value-form
·
项目需要使用日期选择组件,使用el-date-picker日期组件,结果打开一看默认为英语。
未修改前的代码如下
<template>
<div style="padding: 100px">
日期:
<el-date-picker
v-model="value1"
type="date"
placeholder="选择日期"
format="YYYY/MM/DD"
value-format="YYYY-MM-DD"
:locale="locale"
/>
</div>
</template>
<script>
import { ref } from "vue";
export default {
setup() {
const value1 = ref();
return {
value1,
};
},
};
</script>
看了许多方法,有的在main.js里面修改。由于我用的是element官方的自动按需引入,不能在main.js里修改。
在element官方看到文档
点击国际化进入
发现可以使用这个标签包裹实现单一组件的语言修改功能,我尝试了一下
修改后,日期内容显示为中文
代码如下
<template>
<div style="padding: 100px">
日期:
<el-config-provider :locale="locale">
<el-date-picker
v-model="value1"
type="date"
placeholder="选择日期"
format="YYYY/MM/DD"
value-format="YYYY-MM-DD"
:locale="locale"
/>
</el-config-provider>
</div>
</template>
<script>
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { ref } from "vue";
export default {
setup() {
const value1 = ref();
return {
value1,
locale: zhCn,
};
},
};
</script>
更多推荐
已为社区贡献1条内容
所有评论(0)