关于Element Plus 的日期组件修改成中文显示

关于Element Plus 的日期组件修改成中文

1.默认样式

默认是英文的
在这里插入图片描述

2.修改方法

第一步 引入语言包

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

第二步 定义对象

let local = zhcn

第三步 return local

    return {
        local
      }

第四步 用 < el-config-provider>< /el-config-provider>包裹日期组件

<el-config-provider :locale="local">
      <el-date-picker
       v-model="formField.birthday"
       type="date"
       placeholder="生日"
       size="default"/>
</el-config-provider>

3.完整代码

<template>
	<div>
   	  <el-config-provider :locale="local">
      	<el-date-picker
      	 v-model="formField.birthday"
      	 type="date"
      	 placeholder="生日"
       	size="default"/>
	  </el-config-provider>
    </div>
</template>

<script>
import zhcn from 'element-plus/lib/locale/lang/zh-cn'
            export defalut{
                setup(){
                    let local = zhcn
                    return {
       					 local
      				}
                }
            }
            
</script>

4.中文日期组件样式

在这里插入图片描述

posted @   剑心空明  阅读(413)  评论(0编辑  收藏  举报  
相关博文:
阅读排行:
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· AI与.NET技术实操系列(二):开始使用ML.NET
· .NET10 - 预览版1新功能体验(一)
点击右上角即可分享
微信分享提示