解决vue中el-date-picker type=daterange日期不回显的问题

目录
  • vue中el-date-picker type=daterange日期不回显
    • 原始代码
    • 问题发现及处理
  • el-date-picker 日期组件事件回显不生效
    • 日期组件回显处理
    • 本文说明

vue中el-date-picker type=daterange日期不回显

原始代码

<el-form-item class="form_bigt_p" label="项目起止时间:" prop="time">
  <el-date-picker
    unlink-panels
    class="bigWidth"
    :disabled="isDisabled"
    v-model.trim="ruleForm.time"
    type="daterange"
    value-format="timestamp"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
  ></el-date-picker>
</el-form-item>

由于后台返回的数据是两个 yyyy-mm-dd 格式的日期(startTime,endTime)，因此一开始采用

this.ruleForm.time = [
  this.baseDateTemp(res.data.startTime),
  this.baseDateTemp(res.data.endTime),
];
//this.baseDateTemp是全局的转日期为时间戳的方法

问题发现及处理

问题

得到的日期可以渲染在 el-date-picker 上，但是修改的时候不会回显

经测试后发现，此时可以触发 input 方法，但不触发 change 方法

处理方式

在 input 方法中可知，修改时，el-date-picker 所绑定的 v-model 的值已经改变，但是控件中没有实时更新

最终选择采用 this.$set 方法进行数据的更新，并成功解决此问题

修改后代码如下

<el-form-item class="form_bigt_p" label="项目起止时间:" prop="time">
  <el-date-picker
    unlink-panels
    class="bigWidth"
    :disabled="isDisabled"
    v-model.trim="ruleForm.time"
    type="daterange"
    value-format="timestamp"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    @input="testClick"
  ></el-date-picker>
</el-form-item>
 testClick(e) {
      this.$nextTick(() => {
        this.ruleForm.time = null;
        this.$set(this.ruleForm, "time", [e[0], e[1]]);
      });
    },
    // 将后台获取到的两个日期转为time的方法修改为
        this.$set(self.ruleForm, "time", [
          this.baseDateTemp(res.data.startTime),
          this.baseDateTemp(res.data.endTime)
        ]);

el-date-picker 日期组件事件回显不生效

日期组件回显处理

使用datetimerange进行范围选择时，在日期选择面板中选定起始与结束的日期，默认会使用该日期的00:00:00作为起始与结束的时刻；通过选项default-time可以控制选中起始与结束日期时所使用的具体时刻。

default-time接受一个数组，数组每项值为字符串，形如12:00:00，其中第一项控制起始日期的具体时刻，第二项控制结束日期的具体时刻。

  <div class="block">
    <span class="demonstration">起始日期时刻为 12:00:00</span>
    <el-date-picker
      v-model="value1"
      type="datetimerange"
      start-placeholder="开始日期"
      value-format="yyyy-MM-dd HH:mm:ss"
      end-placeholder="结束日期"
      :default-time="['12:00:00']">
    </el-date-picker>
  </div>

使用说明

value-format="yyyy-MM-dd HH:mm:ss"

添加这个属性拿到事件是 你选中在输入框的书简 那么

v-model="value1" 这个value1  就是数组形式存在

本文说明

日期组件时间回显-相信很多人会遇到同一个问题-即使后台返回的数据是 yyyy-MM-dd HH:mm:ss 这个形式直接赋值不生效的问题：

因为数组不是响应式的所以直接应返回的值直接赋值是没有效果的

使用如下方法解决问题：

this.$set(this.value1,0,'你后台返回的事件值yyyy-MM-dd HH:mm:ss')
this.$set(this.value1,1,'你后台返回的事件值yyyy-MM-dd HH:mm:ss')
$set
this.$set(原数组, 索引值, 需要赋的值)

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • element-ui 限制日期选择的方法(datepicker)

    Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint UI . 需求场景如下: 指定起止日期,后选的将会受到先选的限制 不同的日期选择器,不过也存在关联关系 实现方法不难,利用了 change 事件,动态改变 picker-options 中的 disableDate 即可. 查看Demo Template <script src="//unpkg.com/vue/dist/vue.js"></scri

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

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

  • 记录--使用el-time-picker默认值遇到的问题

    目录 使用el-time-picker默认值问题 el-time-picker 默认时间展示 使用el-time-picker默认值问题 首先文档有指出不同组件的默认值default-value类型区别: el-time-picker默认值的类型为new Date(),而el-time-select的默认值类型为string 所以首先要知道是用的哪种组件再设置: 再一个是new Date()需要设置的是完整的日期时间,如果你要使用el-time-picker设置默认值需要这样new Date(0

  • 解决vue中el-date-picker type=daterange日期不回显的问题

    解决vue中el-date-picker type=daterange日期不回显的问题

    目录 vue中el-date-picker type=daterange日期不回显 原始代码 问题发现及处理 el-date-picker 日期组件事件回显不生效 日期组件回显处理 本文说明 vue中el-date-picker type=daterange日期不回显 原始代码 <el-form-item class="form_bigt_p" label="项目起止时间:" prop="time">   <el-date-pi

  • 简单理解vue中el、template、replace元素

    本文实例为大家解析了vue中el.template.replace的元素,供大家参考,具体内容如下 api: http://cn.vuejs.org/api/#el el 类型: String | HTMLElement | Function 限制: 在组件定义中只能是函数. 详细: 为实例提供挂载元素.值可以是 CSS 选择符,或实际 HTML 元素,或返回 HTML 元素的函数.注意元素只用作挂载点.如果提供了模板则元素被替换,除非 replace 为 false.元素可以用 vm.$el

  • 解决vue中对象属性改变视图不更新的问题

    常规情况下我们在vue实例的data中设置响应数据.但当数据为对象,我们增加或删除对象属性值时,视图并不触发更新,如何解决这个问题呢? 实例代码如下: let vm = new Vue{ el: '#app', data: { obj: { k: 'v' } }, ... } 有三种解决方案: 方案一:利用Vue.set(object,key,val) 例:Vue.set(vm.obj,'k1','v1') 方案二:利用this.$set(this.obj,key,val) 例:this.$se

  • 解决vue中使用swiper插件问题及swiper在vue中的用法

    Swiper简介 Swiper常用于移动端网站的内容触摸滑动. Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端. Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. Swiper开源.免费.稳定.使用简单.功能强大,是架构移动终端网站的重要选择! 解决vue中使用swiper插件,在引入swiper插件后,发现无法正常运行问题 这次我们模拟从后台取下数据,然后数据绑定在swiper标签中. <template> <div clas

  • 使用Vuex解决Vue中的身份验证问题

    传统方式中,许多人使用本地存储,来管理通过客户端验证生成的tokens.一个大问题是如何有更好的方式,来管理验证tokens,从而允许我们来存储更大的用户信息. 这就是Vuex的作用. Vuex为Vue.js应用管理状态..对于应用中所有的组件来说,它被当做中央存储,并用规则确保状态只能以可预见的方式改变. 对于经常检查本地存储来说,听起来是个更好的选择?让我们一起来探索下吧. 建立应用模块 对于这个项目,我们想创建一个使用vuex和vue-router的vue应用.我们会使用vue cli 3

  • 解决vue中修改了数据但视图无法更新的情况

    我们有时候常碰到vue中明明修改了数据,但是视图无法更新,因此我总结了一点点碰到此类的情况: 1.v-for遍历的数组,当数组内容使用的是arr[0].xx =xx更改数据,vue无法监测到 数组数据变动:我们使用某些方法操作数组,变动数据时,有些方法无法被vue监测,有些可以 Vue包装了数个数组操作函数,使用这些方法操作的数组去,其数据变动时会被vue监测: push() pop() shift() unshift() splice() sort() reverse() vue2.0还增加个

  • 完美解决vue 中多个echarts图表自适应的问题

    看代码吧~ <div class="echarts"> <IEcharts :option="bar" ref="echarts"></IEcharts> </div> mounted () { this.selfAdaption () }, methods: { //echarts自适应 selfAdaption () { const self = this: setTimeout(() =>

  • 解决vue中el-tab-pane切换的问题

    今天在编写vue的时候用到了el-tabs,然后遇到切换的时候,在次打开el-dialog还是上次的状态(因为两次打开的el-tab-pane数量不一样,就出现了问题) 如下: 第一次打开时的状态,打开到第二次的时候 解决方法 给el-tab-pane命名 <el-tabs type="border-card" v-model="activeName" ></el-tabs> 在script中 data() { return { isShow

  • 解决vue中使用less/sass及使用中遇到无效的问题

    一:使用方法 在vue官方脚手架中,即vue-lci搭建的项目中,可以轻易的使用less/sass. 先使用npm下载依赖,命令行为'npm install less less-loader –save',再在webpack.base.conf.js中添加rules对象: { test: /\.less$/, loader: "style-loader!css-loader!less-loader" }` 然后在style标签中添加lang="less"即可,或者直

  • 解决vue中无法动态修改jqgrid组件 url地址的问题

    在项目开发中使用封装的jqgrid组件时需要动态修改URL地址,直接修改URL地址jqgrid请求的url地址并不会改变,这时我们可以强行修改jqgrid的url地址,修改如下: $("#accountGrid").setGridParam( //G,P要大写 { url:UrlService.url('www/1') } ) .trigger("reloadGrid"); 以上这篇解决vue中无法动态修改jqgrid组件 url地址的问题就是小编分享给大家的全部内

随机推荐