最近在项目中使用element-UI的日期范围组件时遇到一个问题,相信很多人也做过这种场景,一个录入页面也同时是编辑页面,编辑的时候就需要先赋值.但是我给date组件赋值后,确无法操作了,change事件也触发不了,但是对应的值已经改变了,只是页面没改变,这真的是很神奇的bug.通过图片看下我遇到的问题
 
 
 
但是重新选择值之后,页面展示的值确没有变化,change事件也没触发
 
试了多次之后,发现是赋值的问题,date组件有一个displayValue属性,与页面展示的数据一致,一开始我想直接重置displayValue的值,但是发现displayValue是一个只读属性,不能重新赋值.所以就猜测大概使用=赋值之后,displayValue属性没法被改变了,当然更深的验证我也没去做,做项目优先是解决问题
 
 
 
 
有时候常常遇到对象属性不能赋值成功的情况,这时一般使用Vue原始的setter或$set方法赋值,能解决一些赋值问题
 

element-ui日期组件DatePicker选择日期范围赋值编辑问题的更多相关文章

  1. element-ui日期组件DatePicker设置日期选择范围Picker Options

    element-UI提供了DatePicker日期选择器组件,可以让我们很方便的获取到日期,默认的选择是全部的日期都可以选择的,但是很多场景中我们要对日期选择范围做限定,比如出行日期就不能选过去的日期 ...

  2. 原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间

    原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: <!DOCTYPE html PUBLIC " ...

  3. [转]vue Element UI走马灯组件重写

    https://blog.csdn.net/u013750989/article/details/82885482 1.element ui走马灯组件 -- carousel分析一波源代码:carou ...

  4. ElementUI 日期选择器 datepicker 选择范围限制

    在使用elementUI中日期选择器时,经常会遇到这样的需求——对可选择的时间范围有一定限制,比如我遇到的就是:只能选择今天以前的一年以内的日期. 查阅官方文档,我们发现它介绍的并不详细,下面我们就来 ...

  5. 普通element ui table组件的使用

    1.使用基础的element ui 的table的基础使用 首先,使用前要先引用element库到项目中,可以直接引入element的js和css或者在vue项目下按需加载不同的组件 废话不多说,直接 ...

  6. 封装一个优雅的element ui表格组件

    现在做后台系统用vue + elementUI 的越来越多,那element ui的 el-table 组件肯定也离不开.虽然element ui的table组件很好.但是表格和分页是分离的.每次写表 ...

  7. element ui step组件在另一侧加时间轴显示

    这是我开发的时候遇到的一个问题:项目需要在步骤条(竖直方向)的另一侧加时间显示,但是我在element ui 的step组件中一直没找着设置方法,所以就自己想了个办法加进来,效果如下: 代码如下,先上 ...

  8. Element UI table组件源码分析

    本文章从如下图所示的最基本的table入手,分析table组件源代码.本人已经对table组件原来的源码进行削减,源码点击这里下载.本文只对重要的代码片段进行讲解,推荐下载代码把项目运行起来,跟着文章 ...

  9. Element UI表格组件技巧：如何简洁实现跨页勾选、跨页统计功能

    业务场景 在使用Element UI的Table组件时,常常面对这样的业务需求: 表格数据的每一项都要提供勾选框,当切换分页时,能够记忆所有页面勾选的数据,以实现批量提交不同页面勾选数据的功能.并且, ...

随机推荐

  1. Ubuntu14.04-LTS 从系统安装到配置可用

    1.安装Ubuntu14.04LTS-64bit 使用U盘安装很方便快捷,可以使用老毛桃使用iso模式制作一个U盘启动盘,然后分区安装. 如果使用硬盘安装的话需要注意的问题是: 如果电脑上以前有Lin ...

  2. Perl 学习笔记－正则表达式基础篇

    1.Perl中的正则表达式 在Perl中叫做模式, 是一个匹配(或不匹配)某字符串的模板, 是一种小程序, 对于一个字符串, 要么匹配, 要么不匹配. 使用简易模式: 将模式写在一对正斜线(/)中即可 ...

  3. springboot+swagger集成

    一.swagger介绍 Swagger 是一款RESTFUL接口的文档在线自动生成+功能测试功能软件.本文简单介绍了在项目中集成swagger的方法和一些常见问题.如果想深入分析项目源码,了解更多内容 ...

  4. 设计模式17：Iterator 迭代器模式（行为型模式）

    Iterator 迭代器模式(行为型模式) 动机(Motivation) 在软件构建过程中,集合对象内部结构常常变化各异.但对于这些集合对象,我们希望在不暴露其内部结构的同时,可以让外部客户代码可以透 ...

  5. 深入理解java虚拟机（五）垃圾收集器

    垃圾收集器 垃圾收集器是垃圾收集算法的具体实现.Java规范对垃圾收集器的实现没有做任何规定,因此不同的虚拟机提供的垃圾收集器可能有很大差异.HotSpot虚拟机1.7版本使用了多种收集器.如下图. ...

  6. Python 数据分析—第十章 日期处理

    日期时间数据类型及工具 from datetime import datetime now = datetime.now() print(now.year,now.month,now.day) #以毫 ...

  7. 《html5 从入门到精通》读书笔记（三）

    二.标签详解 标签 描述 4 5 <form> 定义表单. 4 5 <h1> to <h6> 定义标题1到标题6. 4 5 <head> 定义关于文档的 ...

  8. 把windows电脑变成路由器使用

    实用小技巧1 把windows电脑变成路由器使用 适用对象: windows7.windows8的笔记本电脑或者有无线网卡的台式电脑 网络要求: CMCC-EDU和家里拨号上网的都可以,但是电信的校园 ...

  9. C# 等待框

    今天发现dev控件自带了等待框,调用方便,而且不会阻塞主线程. 拉一个窗体,界面上放两个按钮,显示等待框,隐藏. <Window x:Class="WaitDialogTest.Mai ...

  10. 【题解】 LA3708 Graveyard

    题目大意 在一个圆周长为10000的圆上等距离分布n个雕塑,现在有m个新加入的雕塑(还是要求等距离摆放),问n个雕塑移动的总距离的最小值. Solution 显然必然会有一个雕塑不移动,所以可以直接不 ...