解决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 相关文章推荐
csdn 博客的css样式 v3
Feb 24 Javascript
jQuery调用WebService的实现代码
Jun 19 Javascript
jQuery学习之prop和attr的区别示例介绍
Nov 15 Javascript
在浏览器中实现图片粘贴的jQuery插件-- pasteimg使用指南
Dec 29 Javascript
分享Javascript实用方法二
Dec 13 Javascript
实例讲解js验证表单项是否为空的方法
Jan 09 Javascript
简单讲解jQuery中的子元素过滤选择器
Apr 18 Javascript
jQuery实现点击查看大图并以弹框的形式居中
Aug 08 Javascript
JavaScript日期对象(Date)基本用法示例
Jan 18 Javascript
Vue插件写、用详解(附demo)
Mar 20 Javascript
javascript完美实现给定日期返回上月日期的方法
Jun 15 Javascript
JS+H5 Canvas实现时钟效果
Jul 20 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
天使彦史上最神还原,性别曝光的那一刻,百万网友恋爱了
2020/03/02 国漫
PHP环境中Memcache的安装和使用
2015/11/05 PHP
php项目开发中用到的快速排序算法分析
2016/06/25 PHP
PHP实现基本留言板功能原理与步骤详解
2020/03/26 PHP
javascript 控制弹出窗口
2007/04/10 Javascript
从零开始学习jQuery (八) 插播:jQuery实施方案
2011/02/23 Javascript
解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题
2013/01/11 Javascript
JavaScript中的style.display属性操作
2013/03/27 Javascript
Node.js中HTTP模块与事件模块详解
2014/11/14 Javascript
Javascript基础教程之if条件语句
2015/01/18 Javascript
js图片放大镜效果实现方法详解
2020/10/28 Javascript
React组件之间的通信的实例代码
2017/06/27 Javascript
NW.js 简介与使用方法
2018/02/01 Javascript
如何获取vue单文件自身源码路径
2019/05/06 Javascript
VUE前后端学习tab写法实例
2019/08/06 Javascript
[01:07]2015国际邀请赛 中国区预选赛精彩回顾
2015/06/15 DOTA
[00:53]2015国际邀请赛 中国区预选赛一触即发
2015/05/14 DOTA
Python学习资料
2007/02/08 Python
Anaconda多环境多版本python配置操作方法
2017/09/12 Python
Python中用psycopg2模块操作PostgreSQL方法
2017/11/28 Python
Python实现DDos攻击实例详解
2019/02/02 Python
python浪漫表白源码
2019/04/05 Python
浅谈python3 构造函数和析构函数
2020/03/12 Python
python3爬虫中多线程进行解锁操作实例
2020/11/25 Python
thinkphp5 路由分发原理
2021/03/18 PHP
使用CSS禁止textarea调整大小功能的方法
2015/03/13 HTML / CSS
Probikekit日本:自行车套件,跑步和铁人三项装备
2017/04/03 全球购物
Nisbets法国:英国最大的厨房和餐饮设备供应商
2019/03/18 全球购物
波兰运动鞋网上商店:Distance.pl
2020/07/30 全球购物
售后主管岗位职责
2013/12/08 职场文书
《鸿门宴》教学反思
2014/04/22 职场文书
应届生找工作求职信
2014/06/24 职场文书
家庭贫困证明
2015/06/16 职场文书
班主任班级管理心得体会
2016/01/07 职场文书
怎么禁用Windows 11快照布局? win11不使用快照布局的技巧
2021/11/21 数码科技
SQL Server删除表中的重复数据
2022/05/25 SQL Server