解决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下将选择的checkbox的id组成字符串的方法
Nov 28 Javascript
XMLHTTP 乱码的解决方法(UTF8,GB2312 编码 解码)
Jan 12 Javascript
javascript删除option选项的多种方法总结
Nov 22 Javascript
原生javaScript做得动态表格(注释写的很清楚)
Dec 29 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
Oct 28 Javascript
jQuery解析json格式数据简单实例
Jan 22 Javascript
详解Matlab中 sort 函数用法
Mar 20 Javascript
js实现分页功能
May 24 Javascript
基于angular-utils-ui-breadcrumbs使用心得(分享)
Nov 03 Javascript
利用vue和element-ui设置表格内容分页的实例
Mar 02 Javascript
Vue自定义组件的四种方式示例详解
Feb 28 Javascript
在VUE中使用lodash的debounce和throttle操作
Nov 09 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
关于PHP模板Smarty的初级使用方法以及心得分享
2013/06/21 PHP
js限制checkbox勾选的个数以及php获取多个checkbbox的方法深入解析
2013/07/18 PHP
详解WordPress中创建和添加过滤器的相关PHP函数
2015/12/29 PHP
yii2缓存Caching基本用法示例
2016/07/18 PHP
PHP实现带重试功能的curl连接示例
2016/07/28 PHP
浅谈PHP实现大流量下抢购方案
2017/12/15 PHP
IE与FireFox的兼容性问题分析
2007/04/22 Javascript
javascript高级学习笔记整理
2011/08/14 Javascript
引用外部脚本时script标签关闭的写法
2014/01/20 Javascript
H5移动端图片压缩上传开发流程
2016/11/09 Javascript
jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码
2016/12/27 Javascript
Javascript 实现全屏滚动实例代码
2016/12/31 Javascript
详解如何在React组件“外”使用父组件的Props
2018/01/12 Javascript
Phaser.js实现简单的跑酷游戏附源码下载
2018/10/26 Javascript
vsCode安装使用教程和插件安装方法
2020/08/24 Javascript
js指定日期增加指定月份的实现方法
2018/12/19 Javascript
Nodejs libuv运行原理详解
2019/08/21 NodeJs
微信小程序实现吸顶效果
2020/01/08 Javascript
python翻译软件实现代码(使用google api完成)
2013/11/26 Python
朴素贝叶斯算法的python实现方法
2014/11/18 Python
Python 中 Meta Classes详解
2016/02/13 Python
Python将图片批量从png格式转换至WebP格式
2020/08/22 Python
Python自动发送邮件的方法实例总结
2018/12/08 Python
Python流行ORM框架sqlalchemy安装与使用教程
2019/06/04 Python
pyqt5实现按钮添加背景图片以及背景图片的切换方法
2019/06/13 Python
python sqlite的Row对象操作示例
2019/09/11 Python
如何实现更换Jupyter Notebook内核Python版本
2020/05/18 Python
MUGLER官方网站:蒂埃里·穆勒香水
2019/11/26 全球购物
《生命 生命》教学反思
2014/04/19 职场文书
小学生感恩演讲稿
2014/04/25 职场文书
司机岗位职责说明书
2014/07/29 职场文书
解放思想演讲稿
2014/09/11 职场文书
村干部任职承诺书
2015/01/21 职场文书
党员自我评价2015
2015/03/03 职场文书
酒店前台接待岗位职责
2015/04/02 职场文书
《童年》读后感(三篇)
2019/08/27 职场文书