1.问题描述
当我们在实用ElementUI组件完成项目的时候可能会遇到这样的需求,比如:
新建一个活动,需要定义活动的时间范围;
因此我们在新建活动的操作过程中需要选择一段时间区间以及活动名称等信息提交,新建完成;
网页上出现了新建好的活动,其他人想查看详细信息,打开页面,发现时间区间并没有实现回填!
2.问题分析
时间信息没有回填,首先要检查,后台数据返回情况以及页面上字段信息是否有差异等细节;
如果没有以上的情况,那就是我碰到的这种情况了,
后端数据返回没有差异,而且页面字段也没有错,其他的信息也正常回填,唯独时间不回填,同时也伴随一次回填后续不回填等诸多情况。总结来说就是:页面与数据不同步!
3.解决办法
打印一下就能知道el-date-picker区间时间组件的数据其实是Array
所以,我们一般从后台拿到数据后进行回填操作如下:
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)添加点击事件无效的解决方案
你会发现,使用这种方式绑定事件是无效
正确方式 @click.native绑定点击事件
以上这篇解决Element中el-date-picker组件不回填的情况就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持站长技术。
前端开发入门知识 前端开发概念 创建Web页面或app等的前端页面 所用技术 HTMLCSS...
8条Asp编码优化技巧: 1、声明VBScript变量 在ASP中,对vbscript提供了强劲的支...
什么是HTTP Headers HTTP是Hypertext Transfer Protocol的所写,整个万维网都在...
我一开始学前端的时候我也问过别人这个问题 很多人都会告诉我需要什么能力需要什...
今天看着MySQL的数据字典,突然想到一个问题:为什么MySQL数据字典 information_...
消息称Windows 10将计划在2021年秋季推出全新设计的版本,根据Windows Central的...
这两年对于Windows10的UWP生态来说,无疑是溃败的时期。很多优秀的UWP应用,要不...
这个不起眼的终端功能在紧要关头提供一个文本编辑器。 在 Linux 和 Unix 的 shel...
做一个项目用到Ajax,开始觉得挺好,后来发现一个问题,例如删除一项,恢复之后就...
安装 1、先安装vscode,然后在扩展中搜索Remote SSH插件并安装。 2、我要连接远...