vue控件a-date-picker设置默认值的方式以及注意事项

编程之家收集整理的这篇文章主要介绍了vue控件a-date-picker设置默认值的方式以及注意事项编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

a-date-picker设置默认值

在Vue中datePicker的使用是比较多的,但是用到a-date-picker的时候难免会遇到一下预料之外的事情

在设置默认值这个事情上,就给了当头一棒,设置老不成功

踩坑:

先说如何踩坑,在一般思维观念上,a-date-picker绑定一个model,然后model在初始赋值,值直接用字符串赋值,这就遇上事了

原因:

a-date-picker其实数据模型是moment,使用a-date-picker就必须结合moment来实现。

所以model用字符串赋值就直接挂掉了。

示例:

来,搬代码

首先的先安装moment的插件

npm install moment -save

控件的代码如下,就是v-model的绑定

<a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="开始时间">
              <a-date-picker
                showTime
                @change="startDatePickerChange($event)"
                format="YYYY-MM-DD HH:mm:ss"
                v-model="queryParam.startDate"
              />
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="结束时间">
              <a-date-picker
                showTime
                @change="endDatePickerChange($event)"
                format="YYYY-MM-DD HH:mm:ss"
                v-decorator="['endDate', {}]"
                v-model="queryParam.endDate"
              />
            </a-form-item>
          </a-col>

在data定义的时候我选择直接把model定义为undefined

queryParam:{
        startDate:undefined,
        endDate: undefined
      }

最后在created,再选择赋值给model

created() {
    var startDate = '2021-01-01 12:00:00'
    var endDate = '2021-03-01 23:59:59'
    this.queryParam.startDate = this.moment(startDate,'YYYY-MM-DD HH:mm:ss');
    this.queryParam.endDate = this.moment(endDate,'YYYY-MM-DD HH:mm:ss');
}

最后搞定,a-date-picker初始化默认值成功


总结

以上是编程之家为你收集整理的vue控件a-date-picker设置默认值的方式以及注意事项全部内容,希望文章能够帮你解决vue控件a-date-picker设置默认值的方式以及注意事项所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。

小编个人微信号 jb51ccc
喜欢与人分享编程技术与工作经验,欢迎加入编程之家官方交流群!

相关文章

猜你在找的Vue相关文章

在介绍如何封装 axios 的 http 请求之前,我们先来了解下什么是 axios。axios 是通过 promise 实现对 ajax 技术 的一种封装,就像 jQuery 实现 ajax 封装一样。简单来说,ajax 技术实现了网页的局部数据刷新,axios 实现了对 ajax 的封装。平时开发 vue 项目时,不同模块都会使用 axios 请求后台的接口,代码如下:this.$axios({ method: "POST", url: "接口地址", params: { 参
随着页面数据越来越多,一次性加载所有数据会对后端服务造成压力,同时加载速度慢也会影响用户体验,所以我们通常使用分页的方式来提高性能,优化体验。很多其他博客中都是后端返回所有数据,前端再进行截取,个人认为这样并没有实现真正意义上的分页,所以本博客中由后端实现数据分页,前端只负责展示和处理。vue 分页可以通过 iView 的 Page 组件来实现,简单高效。一. vue 的 Page 组件实现前端分页1. 在 vue 文件中引入 Page 组件&lt;template&gt; &lt;div&g
先来了解一下几个相关概念1、渐进式框架下面是摘自知乎的一个解答(个人认为讲述比较好的回答):在我看来,渐进式代表的含义是:主张最少。每个框架都不可避免会有自己的一些特点,从而会对使用者有一定的要求,这些要求就是主张,主张有强有弱,它的强势程度会影响在业务开发中的使用方式。比如说,Angular,它两个版本都是强主张的,如果你用它,必须接受以下东西:- 必须使用它的模块机制- 必须...
vue组件的定义● 组件(Component)是Vue.js最强大的功能之一● 组件可以扩展HTML元素,封装可重用代码● 在较高层面上,组件是自定义元素,Vue.js的编译器为他添加特殊功能● 有些情况下,组件也可以表现用 is 特性进行了扩展的原生的HTML元素● 所有的Vue组件同时也都是Vue实例,所以可以接受相同的选项对象(除了一些根级特有的选项),并提供相同的生命周...
下面介绍Vue中集成的指令以及用法和作用v-bind v-on v-model v-for v-html v-text v-if v-else-if v-else v-show v-once v-pre v-cloak1、声明式渲染有两种方法A、文本插值,用两个花括号:{{内容}}html如下:&lt;div id="app"&gt...
1、vue-router的作用与及定义vue-router可以通过html5的history API或者hash实现单页应用,即不刷新跳转,切换地址,只是页面上的组件的切换;vue-router可以实现页面间传参等其他功能;vue-router就是路由,用于页面跳转。当我点击页面上的home  按钮时,页面中就要显示home的内容,如果点击页面上的about 按钮,页面中就要显示about 的内容...
vue.js的vue-cli的理解:vue-cli是Vue的脚手架工具,帮我们写好vue.js基础代码的工具,搞定目录结构、本地调试、代码部署、热加载、单元测试等工作。vue.js开发环境搭建1、安装node.js,下载地址,安装好之后需要配置node.js系统环境变量,这里要保证node.js的版本是4版本以上2、安装全局vue-cli脚手架,用于帮助搭建所需的模板框架首先:...
使用vue-cli创建的工程的相关文件介绍1、使用vue-cli安装的项目的整个文件如下图所示:下面介绍一级目录的文件夹的作用sell2是项目名;一级目录下的文件夹名build和config都是和webpack配置相关的;文件夹node_modules是通过npm install安装的依赖代码库;文件夹src用来存放项目源码,即开发的代码都放在src文件夹下;文件夹static存放第三方静...
微信公众号搜索 “ 程序精选 ” ,选择关注!
微信公众号搜 "程序精选"关注