解决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 相关文章推荐
textarea中的手动换行处理的jquery代码
Feb 26 Javascript
JSF中confirm弹出框的用法示例介绍
Jan 07 Javascript
点击A元素触发B元素的事件在IE8下会识别成A元素
Sep 04 Javascript
原生js实现的贪吃蛇网页版游戏完整实例
May 18 Javascript
JavaScript中创建对象的7种模式详解
Feb 21 Javascript
jquery中关于bind()方法的使用技巧分享
Mar 30 jQuery
vue学习笔记之vue1.0和vue2.0的区别介绍
May 17 Javascript
微信小程序项目实践之主页tab选项实现
Jul 18 Javascript
JS中的两种数据类型及实现引用类型的深拷贝的方法
Aug 12 Javascript
基于vue和react的spa进行按需加载的实现方法
Sep 29 Javascript
websocket4.0+typescript 实现热更新的方法
Aug 14 Javascript
vue路由传参的基本实现方式小结【三种方式】
Feb 05 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生成Flash动画的实现代码
2010/03/12 PHP
Laravel 中使用 Vue.js 实现基于 Ajax 的表单提交错误验证操作
2017/06/30 PHP
jQuery新闻滚动插件 jquery.roller.js
2011/06/27 Javascript
JavaScript两种跨域技术全面介绍
2014/04/16 Javascript
nodejs教程之入门
2014/11/21 NodeJs
使用控制台破解百小度一个月只准改一次名字
2015/08/13 Javascript
JavaScript中this的用法及this在不同应用场景的作用解析
2017/04/13 Javascript
利用SpringMVC过滤器解决vue跨域请求的问题
2018/02/10 Javascript
JavaScript中字符串的常用操作方法及特殊字符
2018/03/18 Javascript
使用vue2实现购物车和地址选配功能
2018/03/29 Javascript
Bootstrap标签页(Tab)插件切换echarts不显示问题的解决
2018/07/13 Javascript
vue主动刷新页面及列表数据删除后的刷新实例
2018/09/16 Javascript
angular4自定义组件非input元素实现ngModel双向数据绑定的方法
2018/12/28 Javascript
vue实现分页组件
2020/06/16 Javascript
JavaScript跳出循环的三种方法(break, return, continue)
2019/07/30 Javascript
Layui 解决表格异步调用后台分页的问题
2019/10/26 Javascript
vue制作抓娃娃机的示例代码
2020/04/17 Javascript
python实现简单淘宝秒杀功能
2018/05/03 Python
python 实现矩阵上下/左右翻转,转置的示例
2019/01/23 Python
WxPython实现无边框界面
2019/11/18 Python
python数据预处理 :样本分布不均的解决(过采样和欠采样)
2020/02/29 Python
Python中实现输入一个整数的案例
2020/05/03 Python
Python调用百度OCR实现图片文字识别的示例代码
2020/07/17 Python
Smallable英国家庭概念店:设计师童装及家居装饰
2017/07/05 全球购物
GoPro摄像机美国官网:美国运动相机厂商
2018/07/03 全球购物
Doyoueven官网:澳大利亚健身服饰和配饰品牌
2019/03/24 全球购物
英国天然抗衰老护肤品品牌:Nakin Skin Care
2019/04/16 全球购物
Hotels.com泰国:酒店预订网站
2019/11/20 全球购物
必须要使用游标的SQL语句有那些
2012/05/07 面试题
授权收款委托书范本
2014/10/10 职场文书
2015年个人剖析材料范文
2014/12/29 职场文书
2019行政前台转正申请书范文3篇
2019/08/15 职场文书
js实现上传图片到服务器
2021/04/11 Javascript
Python3.10的一些新特性原理分析
2021/09/15 Python
分享7个 Python 实战项目练习
2022/03/03 Python
在Windows Server 2012上安装 .NET Framework 3.5 所遇到的问题
2022/04/29 Servers