解决Element中el-date-picker组件不回填的情况


Posted in Javascript onNovember 07, 2020

1.问题描述

当我们在实用ElementUI组件完成项目的时候可能会遇到这样的需求,比如:

新建一个活动,需要定义活动的时间范围;

因此我们在新建活动的操作过程中需要选择一段时间区间以及活动名称等信息提交,新建完成;

网页上出现了新建好的活动,其他人想查看详细信息,打开页面,发现时间区间并没有实现回填!

解决Element中el-date-picker组件不回填的情况

2.问题分析

时间信息没有回填,首先要检查,后台数据返回情况以及页面上字段信息是否有差异等细节;

如果没有以上的情况,那就是我碰到的这种情况了,

后端数据返回没有差异,而且页面字段也没有错,其他的信息也正常回填,唯独时间不回填,同时也伴随一次回填后续不回填等诸多情况。总结来说就是:页面与数据不同步!

3.解决办法

打印一下就能知道el-date-picker区间时间组件的数据其实是Array

解决Element中el-date-picker组件不回填的情况

所以,我们一般从后台拿到数据后进行回填操作如下:

getDetails (obj){
 // form.daterange是el-date-picker组件v-model的变量
 this.form.daterange[0] = obj.startTime;
 this.form.daterange[1] = obj.endTime;
}

然而,页面上经常不显示,其实我们这样做也是没问题的,这是element UI自身存在的bug吧,不光日期选择组件有这个问题,有时候下拉框也会偶尔出现此类现象,但是我们可以稍稍修改一下就没问题了,如下:

getData (obj) {
 this.form.daterange = [obj.startTime, obj.endTime]
}

这是最简单的实现了,还有其他的方法也是可以,只要能实现我们的需求可以尽量尝试一些其他方式,在此就不一一列举了。

补充知识:vue中使用elementUI的下拉框(el-dropdown)添加点击事件无效的解决方案

解决Element中el-date-picker组件不回填的情况

你会发现,使用这种方式绑定事件是无效

正确方式 @click.native绑定点击事件

解决Element中el-date-picker组件不回填的情况

以上这篇解决Element中el-date-picker组件不回填的情况就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery 表格合并的问题分享
Sep 17 Javascript
php+js实现倒计时功能
Jun 02 Javascript
删除javascript所创建子节点的方法
May 21 Javascript
javaScript实现可缩放的显示区效果代码
Oct 26 Javascript
AngularJS控制器controller正确的通信的方法
Jan 25 Javascript
jquery广告无缝轮播实例
Jan 05 Javascript
bootstrap datetimepicker日期插件使用方法
Jan 13 Javascript
深入理解vue.js中$watch的oldvalue与newValue
Aug 07 Javascript
mui 打开新窗口的方式总结及注意事项
Aug 20 Javascript
在knockoutjs 上自己实现的flux(实例讲解)
Dec 18 Javascript
11个教程中不常被提及的JavaScript小技巧(推荐)
Apr 17 Javascript
基于vue项目设置resolves.alias: '@'路径并适配webstorm
Dec 02 Vue.js
解决element-ui的下拉框有值却无法选中的情况
Nov 07 #Javascript
解决VUE项目使用Element-ui 下拉组件的验证失效问题
Nov 07 #Javascript
详解datagrid使用方法(重要)
Nov 06 #Javascript
VUE异步更新DOM - 用$nextTick解决DOM视图的问题
Nov 06 #Javascript
nuxt.js服务端渲染中axios和proxy代理的配置操作
Nov 06 #Javascript
微信小程序开发数据缓存基础知识辨析及运用实例详解
Nov 06 #Javascript
nuxt 路由、过渡特效、中间件的实现代码
Nov 06 #Javascript
You might like
php多种形式发送邮件(mail qmail邮件系统 phpmailer类)
2014/01/22 PHP
ThinkPHP做文字水印时提示call an undefined function exif_imagetype()解决方法
2014/10/30 PHP
php判断两个浮点数是否相等的方法
2015/03/14 PHP
PHP6连接SQLServer2005的三部曲
2016/04/15 PHP
CI框架实现框架前后端分离的方法详解
2016/12/30 PHP
PHP读取Excel类文件
2017/05/15 PHP
php简单中奖算法(实例)
2017/08/15 PHP
$()JS小技巧
2007/07/21 Javascript
jquery实现每个数字上都带进度条的幻灯片
2013/02/20 Javascript
借助script进行Http跨域请求:JSONP实现原理及代码
2013/03/19 Javascript
JS判断表单输入是否为空(示例代码)
2013/12/23 Javascript
Chrome扩展页面动态绑定JS事件提示错误
2014/02/11 Javascript
node.js中的events.EventEmitter.listenerCount方法使用说明
2014/12/08 Javascript
javaScript事件机制兼容【详细整理】
2016/07/23 Javascript
vue项目中做编辑功能传递数据时遇到问题的解决方法
2016/12/19 Javascript
JS实现的简单图片切换功能示例【测试可用】
2017/02/14 Javascript
Bootstrap 模态框自定义点击和关闭事件详解
2018/08/10 Javascript
VUE组件中的 Drawer 抽屉实现代码
2019/08/06 Javascript
js实现图片跟随鼠标移动效果
2019/10/16 Javascript
js中位数不足自动补位扩展padLeft、padRight实现代码
2020/04/06 Javascript
javascript实现评分功能
2020/06/24 Javascript
[02:45]2016年中国刀塔全程回顾,完美“圣”典即将上演
2016/12/15 DOTA
使用beaker让Facebook的Bottle框架支持session功能
2015/04/23 Python
在Python中使用cookielib和urllib2配合PyQuery抓取网页信息
2015/04/25 Python
Python获取央视节目单的实现代码
2015/07/25 Python
python解决js文件utf-8编码乱码问题(推荐)
2018/05/02 Python
改变 Python 中线程执行顺序的方法
2020/09/24 Python
HTML5拍照和摄像机功能实战详解
2019/01/24 HTML / CSS
英国最大的宠物食品和宠物用品网上零售商: Zooplus
2016/08/01 全球购物
C语言怎样定义和声明全局变量和函数最好
2013/11/26 面试题
区域销售经理岗位职责
2013/12/10 职场文书
《狐假虎威》教学反思
2014/02/07 职场文书
环保建议书200字
2014/05/14 职场文书
个人党性分析总结
2015/03/05 职场文书
2015年春训学习心得体会范文
2015/03/09 职场文书
2021年国产动漫公司排行前十名,玄机科技上榜,第二推出过铠甲勇士
2022/03/18 杂记