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

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

赞 (0)

相关推荐

  • 详解element-ui中el-select的默认选择项问题

    详解element-ui中el-select的默认选择项问题

    直接绑定将option中的value值绑定给v-model <template> <div> <el-select v-model="query"> <el-option v-for="item in options" :key="item.value" :value="item.value" :label="item.label"></el-optio

  • vue elementui 实现搜索栏公共组件封装的实例代码

    vue elementui 实现搜索栏公共组件封装的实例代码

    1.背景 vue后台管理系统,会有很多表格页面,表格上方会有一些搜索选项,表格直接使用el-table即可,而搜索栏区域每次写起来都很繁琐,而且多人开发情况下每个人写的样式都不相同,布局样式无法统一. 所以要考虑对搜索栏做一个封装,统一配置引用,提升开发维护效率和界面统一. 完成后的效果大概就是长这样: 2.分析 项目使用的是elementui框架,搜索栏这种表单提交,首先要使用el-form组件来封装,而复杂点就是表单项可能有很多种,例如input输入框.select选择框.日期时间选择框.日

  • 解决element-ui的下拉框有值却无法选中的情况

    问题描述: 在使用Vue框架和element-ui开发时,下拉框遇见一个问题,在函数中改变了页面中的某个值,在函数中查看是修改成功了,但在页面中没有及时刷新改变后的值,也就是下拉框值无法选中.(踩坑踩得莫名其妙) 代码段: <el-select v-model="value" placeholder="请选择" @change="change()"> <el-option v-for="item in options&

  • 解决VUE项目使用Element-ui 下拉组件的验证失效问题

    问题描述: 在使用Element-ui组件做项目开发时候有可能会使用下拉框组件,如果下拉框组件的option选项是使用v-if指令遍历的, 这样也没有问题,但是如果加上multiple属性,也就是可以多选 就会出现下拉框验证时失效问题. 问题现象: 如图所示,明明已经选择了选项,可是验证还是为空,因此不能提交请求 解决思路: 如果说找遍组件里的方法都无法获得我们适合使用的,那就要动用原生基本功了 console.log一下v-model在此组件上绑定的属性,你发现你绑定的字符串(一般情况下都是S

  • 解决Element中el-date-picker组件不回填的情况

    1.问题描述 当我们在实用ElementUI组件完成项目的时候可能会遇到这样的需求,比如: 新建一个活动,需要定义活动的时间范围: 因此我们在新建活动的操作过程中需要选择一段时间区间以及活动名称等信息提交,新建完成: 网页上出现了新建好的活动,其他人想查看详细信息,打开页面,发现时间区间并没有实现回填! 2.问题分析 时间信息没有回填,首先要检查,后台数据返回情况以及页面上字段信息是否有差异等细节: 如果没有以上的情况,那就是我碰到的这种情况了, 后端数据返回没有差异,而且页面字段也没有错,其他

  • 解决vue 中 echart 在子组件中只显示一次的问题

    问题描述 一次项目开发过程中,需要做一些图表,用的是百度开源的 echarts. vue推荐组件化开发,所以就把每个图表封装成子组件,然后在需要用到该图表的父组件中直接使用. 实际开发中,数据肯定都是异步获取的.所以我们在 mounted 生命周期中获取数据.对vue生命周期不熟悉的,可以去看一下我之前写一篇文章vue2.0项目实战(4)生命周期和钩子函数详解 由于父组件请求的数据并不是一成不变的,会根据不同的条件请求不同的数据,此时需要图表进行更新. 代码示例 在父组件中 // Main.vu

  • 解决IDEA中 Ctrl+ALT+V这个快捷键无法使用的情况

    解决IDEA中 Ctrl+ALT+V这个快捷键无法使用的情况

    这个是由于快捷键冲突造成的: 所以可以查应用 比如: 1)搜狗输入法中设置的语句 2)QQ音乐的快捷键 3)有道词典的快键键 把上面找的快键键删除,那么在IDEA里面就可以使用了 若是查询的时候出现下图时,那么就是可以使用了 补充:ctrl+alt+m被占用.intellij idea中不能用快捷键抽取方法 intellij idea中ctrl+alt+M是jian将代码抽取chen成方法的快捷键.但是我不管怎么按都没有效果,后来发现应该被某程序给全局占用了. 但是一直不知道被哪个程序占用了.在

  • 解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题

    在移动端开发中使用到了Mint-ui组件库,其中有两个组件Popup组件和Datetime Picker存在滚动性穿透问题,官方文档最新版并没有解决这个问题. 现象还原 官方地址 手机扫码查看demo,查看两个组件Popup组件和Datetime的例子演示. 问题原因 HTML5触摸事件touchmove事件:当手指在屏幕上滑动的时候连续地触发 所以当激活出组件Popup组件和Datetime Picker的弹出层时,我们在弹层选择内容时上下连续滑动是会触发该事件 解决思路 在弹出层出现之后阻止

  • element中form组件prop嵌套属性的问题解决

    element中form组件prop嵌套属性的问题解决

    目录 Introduction 总结 Introduction 分享今天同事问的一个问题, 下面这段代码会报错,先看代码:重点是el-form-item组件的prop属性 <template> <div id="app"> <el-form label-width="100px" :model="ruleForm" :rules="rules"> <el-form-item v-for

  • jsp页面中EL表达式被当成字符串处理不显示值问题的解决方法

    在自己练手时遇到了EL表达式被当成字符串处理而没有正确解析的现象.当时工程中使用的Javaee5, web.xml <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/

  • 使用Element的InfiniteScroll 无限滚动组件报错的解决

    一.问题描述 在使用Element的InfiniteScroll 无限滚动时候出现以下错误: TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node' InfiniteScroll的更多用法element官网 二.解决办法 给需要使用 InfiniteScroll 的元素或者它的父级元素加上 overflow:auto; 属性即可. <template> <

  • vue3中echarts的tooltip组件不显示问题及解决

    vue3中echarts的tooltip组件不显示问题及解决

    目录 vue3 echarts的tooltip组件不显示 解决办法 Echarts|tooltip提示框组件参数 vue3 echarts的tooltip组件不显示 data() { return { chartInstance: '' } }, mounted() { if(!this.chartInstance) this.chartInstance = echarts.init(this.$refs.myChart) this.chartInstance.setOption(option)

  • Element UI中v-infinite-scroll无限滚动组件使用详解

    目录 一.v-infinite-scroll无限滚动组件使用详解 二.组件无限加载原因及解决方式 三.总结 总结 一.v-infinite-scroll无限滚动组件使用详解 1.v-infinite-scroll="load" //load无限滚动加载的方法 2.infinite-scroll-disabled //是否禁用无限滚动加载 3.infinite-scroll-delay //节流时延,单位为ms 4.infinite-scroll-distance //触发加载的距离阈值

  • JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题如何解决

    var date = new Date('2016-11-11 11:11:11'); document.write(date); 最近在写一个时间判断脚本,需要将固定好的字符串时间转换为时间戳进行比较,在做的时候个人习惯使用chrome作为调试工具,代码基本完成之后,一切正常: 使用其他浏览器访问,好嘛,IE跟safari都不兼容,返回错误"Invalid Date". 想着估计是字符串格式的问题,改成'2016/11/11 11:11:11'再测试,结果正常,以为这样应该没问题了,

随机推荐