首页 > 其他分享 >el-date-picker的value-forma在Element UI (Vue 2)和Element Plus (Vue 3)中的不同

el-date-picker的value-forma在Element UI (Vue 2)和Element Plus (Vue 3)中的不同

时间:2024-07-17 11:42:34浏览次数:12  
标签:picker Vue Element Plus date UI

 

Element UI (Vue 2):

<template>
  <el-form-item prop="register_date" label="成立日期">
    <el-date-picker
      v-model="temp.register_date"
      type="date"
      value-format="yyyy-MM-dd"
      default-value="2020-01-01"
      placeholder="选择日期"
    />
  </el-form-item>
</template>

<script>
export default {
  data() {
    return {
      temp: {
        register_date: ''
      }
    };
  }
};
</script>

Element Plus (Vue 3):

<template>
  <el-form-item prop="register_date" label="成立日期">
    <el-date-picker
      v-model="temp.register_date"
      type="date"
      value-format="YYYY-MM-DD"
      :default-value="defaultDate"
      placeholder="选择日期"
    />
  </el-form-item>
</template>

<script>
import { defineComponent } from 'vue';
import { ElFormItem, ElDatePicker } from 'element-plus';

export default defineComponent({
  components: {
    ElFormItem,
    ElDatePicker,
  },
  data() {
    return {
      temp: {
        register_date: ''
      },
      defaultDate: new Date().toISOString().split('T')[0]
    };
  }
});
</script>

 

标签:picker,Vue,Element,Plus,date,UI
From: https://www.cnblogs.com/beichengshiqiao/p/18306959

相关文章

  • 基于ssm网上办公自动化vue管理系统(源码+LW+部署讲解)
    前言......
  • vue基础day01(MVVM、绑定、事件、结构模板)
    vue基础一、什么是vue构建用户界面的渐进式框架,采用自底向上逐层应用开发核心理念:数据驱动视图,组件化开发二、框架和库的区别框架:一套完整的解决方案,对项目的侵入性较大,项目如果需要更换框架,需要重新架构整个项目库:提供了一个小的功能,对项目的侵入性较小,如果某个库无......
  • 基于web的人力资源管理系统 毕业设计 springboot+Vue+mysql
    介绍在当今企业管理中,人力资源的有效管理对于组织的发展至关重要。为了提高人力资源管理的效率和准确性,我们开发了这个基于Web的人力资源管理系统。该系统旨在为企业提供一个全面、便捷、高效的人力资源管理平台,满足企业对人力资源规划、招聘、培训、绩效管理等方面的需求。......
  • 基于springboot的社区智慧养老监护管理平台 毕业设计 springboot+Vue+mysql
    介绍随着人口老龄化的加剧,养老服务的需求日益增长,传统的养老模式已经难以满足现代社会的需求。为了提供更高效、便捷、个性化的养老服务,我们开发了这个基于SpringBoot的社区智慧养老监护管理平台。该平台旨在整合社区养老资源,实现对老年人的全面监护和管理,提升养老服务的质......
  • 基于springboot的教师工作量管理系统 毕业设计 springboot+Vue+mysql
    介绍在教育领域,对教师工作量的准确评估和有效管理对于保障教学质量、合理分配资源以及激励教师积极性具有至关重要的意义。然而,传统的教师工作量管理方式往往依赖于手工记录和繁琐的统计,容易出现误差、效率低下且缺乏透明度。本基于SpringBoot的教师工作量管理系统旨在为......
  • vue3,生产环境,禁止调试输出(重写console的方式)
    如果你想在生产环境中直接重写console的方法以禁止其输出,你可以在你的主入口文件(通常是main.js或main.ts)中添加一些代码来实现这一点。但是,请注意,直接修改全局对象(如console)可能不是最佳实践,因为它可能会与其他库或框架产生冲突。然而,如果你确实想这样做,下面是一个简单的例子,说明......
  • vue3 | 通信组件之provide 与 inject实现兄弟组件通信
    一、vue3|通信组件之provide与inject实现兄弟组件通信 通过共同祖先组件使用provide与inject来提供和注入状态,从而实现兄弟组件通信的示例。例子:祖先组件提供了一个名为 sharedState 的响应式状态,并通过 provide 函数将其提供给所有子组件。ChildA 和 ChildB ......
  • vue 使用svg文件图片或者组件方式
    代码<template><!--svg使用--><divclass="box"><div><!--设置stylefill:ref方式可以直接修改svg颜色样式--><svgstyle="fill:red"xmlns="http://www.w3.org/2000/svg"......
  • vue3+TS从0到1手撸后台管理系统
    1.路由配置1.1路由组件的雏形src\views\home\index.vue(以home组件为例)1.2路由配置1.2.1路由index文件src\router\index.ts//通过vue-router插件实现模板路由配置import{createRouter,createWebHashHistory}from'vue-router'import{constantRoute}from'./route......
  • vue3 widthDefaults 设置props默认值
    测试代码<template><divclass="box"><div><i-ep-edit/></div><div><i-ep-chat-dot-round/></div><div><i-ep-close/></div></div></template><scriptl......