解决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 相关文章推荐
对xmlHttp对象方法和属性的理解
Jan 17 Javascript
jquery live()重复绑定的解决方法介绍
Jan 03 Javascript
javascript中 try catch用法
Aug 16 Javascript
初步使用bootstrap快速创建页面
Mar 03 Javascript
jquery.tableSort.js表格排序插件使用方法详解
Aug 12 Javascript
javaScript+turn.js实现图书翻页效果实例代码
Feb 16 Javascript
浅谈angular4生命周期钩子
Sep 05 Javascript
three.js 入门案例详解
Jan 23 Javascript
vue组件之间通信实例总结(点赞功能)
Dec 05 Javascript
js实现无缝滚动双图切换效果
Jul 09 Javascript
vue 实现动态路由的方法
Jul 06 Javascript
Vue父组件监听子组件生命周期
Sep 03 Javascript
解决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
索尼SONY SRF-S83/84电路分析和打磨
2021/03/02 无线电
Php做的端口嗅探器--可以指定网站和端口
2006/10/09 PHP
CI框架给视图添加动态数据
2014/12/01 PHP
PHP整合PayPal支付
2015/06/11 PHP
Yii2使用自带的UploadedFile实现的文件上传
2016/06/20 PHP
PHP设计模式之原型模式定义与用法详解
2018/04/03 PHP
thinkphp5.1框架实现格式化mysql时间戳为日期的方式小结
2019/10/10 PHP
laravel 创建命令行命令的图文教程
2019/10/23 PHP
Javascript 遍历对象中的子对象
2009/07/03 Javascript
基本jquery的控制tabs打开的数量的代码
2010/10/17 Javascript
Javascript变量函数浅析
2011/09/02 Javascript
Jquery提交表单 Form.js官方插件介绍
2012/03/01 Javascript
原生JS实现加入收藏夹的代码
2013/10/24 Javascript
js中opener与parent的区别详细解析
2014/01/14 Javascript
基于NodeJS的前后端分离的思考与实践(四)安全问题解决方案
2014/09/26 NodeJs
修改js confirm alert 提示框文字的简单实例
2016/06/10 Javascript
打造自己的jQuery插件入门教程
2016/09/23 Javascript
JS中跨页面调用变量和函数的方法(例如a.js 和 b.js中互相调用)
2016/11/01 Javascript
在iframe中使bootstrap的模态框在父页面弹出问题
2017/08/07 Javascript
小程序hover-class点击态效果实现
2019/02/26 Javascript
[02:54]DOTA2英雄基础教程 撼地者
2014/01/14 DOTA
[44:30]完美世界DOTA2联赛PWL S2 GXR vs Magma 第一场 11.25
2020/11/26 DOTA
python 连接sqlite及简单操作
2017/06/30 Python
Python Requests模拟登录实现图书馆座位自动预约
2018/04/27 Python
使用Python微信库itchat获得好友和群组已撤回的消息
2018/06/24 Python
下载与当前Chrome对应的chromedriver.exe(用于python+selenium)
2020/01/14 Python
python实现手势识别的示例(入门)
2020/04/15 Python
用css3写出气球样式的示例代码
2017/09/11 HTML / CSS
X/HTML5 和 XHTML2
2008/10/17 HTML / CSS
C#里面如何倒序排列一个数组的元素?
2013/06/21 面试题
外语学院毕业生的自我鉴定
2013/11/28 职场文书
小学运动会入场式解说词
2014/02/18 职场文书
领导干部作风建设剖析材料
2014/10/11 职场文书
先进党员事迹材料
2014/12/24 职场文书
2015年学校党支部工作总结
2015/04/01 职场文书
win11系统中dhcp服务异常什么意思? Win11 DHCP服务异常修复方法
2022/04/08 数码科技