蝙蝠岛资源网 Design By www.hbtsch.com

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组件不回填的情况就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

标签:
Element,el-date-picker组件,不回填

蝙蝠岛资源网 Design By www.hbtsch.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
蝙蝠岛资源网 Design By www.hbtsch.com

评论“解决Element中el-date-picker组件不回填的情况”

暂无解决Element中el-date-picker组件不回填的情况的评论...

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。