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

 更新时间:2022年10月11日 14:43:07   作者:Double.杨  
这篇文章主要介绍了解决vue中el-date-picker type=daterange日期不回显的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

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(原数组, 索引值, 需要赋的值)

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue框架下部署上线后刷新报404问题的解决方案(推荐)

    vue框架下部署上线后刷新报404问题的解决方案(推荐)

    这篇文章主要介绍了vue框架下部署上线后刷新报404问题解决方案,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-04-04
  • vue3中关于路由hash与History的设置

    vue3中关于路由hash与History的设置

    这篇文章主要介绍了vue3中关于路由hash与History的设置方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • vue-router vuex-oidc动态路由实例及功能详解

    vue-router vuex-oidc动态路由实例及功能详解

    这篇文章主要为大家介绍了vue-router vuex-oidc动态路由实例及功能详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-11-11
  • vue-i18n实现中英文切换的方法

    vue-i18n实现中英文切换的方法

    这篇文章主要介绍了vue-i18n实现中英文切换的方法,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下
    2020-07-07
  • vue打包后显示空白正确处理方法

    vue打包后显示空白正确处理方法

    很多朋友遇到这样的问题当vue打包后显示空白问题,遇到这样的问题怎么处理呢?下面脚本之家小编给大家分享下vue打包后显示空白正确处理方法,感兴趣的朋友一起看看吧
    2017-11-11
  • vue响应式Object代理对象的修改和删除属性

    vue响应式Object代理对象的修改和删除属性

    这篇文章主要为大家介绍了vue响应式Object代理对象的修改和删除属性示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • vue实现输入框自动跳转功能

    vue实现输入框自动跳转功能

    这篇文章主要为大家详细介绍了vue实现输入框自动跳转功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-05-05
  • Vue Element-ui实现树形控件节点添加图标详解

    Vue Element-ui实现树形控件节点添加图标详解

    这篇文章主要为大家介绍了Element-ui实现树形控件节点添加图标,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-11-11
  • Vuex模块化和命名空间namespaced实例演示

    Vuex模块化和命名空间namespaced实例演示

    这篇文章主要介绍了Vuex模块化和命名空间namespaced的相关知识,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-11-11
  • VUE3使用JSON编辑器的详细图文教程

    VUE3使用JSON编辑器的详细图文教程

    最近项目中有用到json编辑器,我选用了这款vue的编辑器,看起来也是比较简洁,接下来就具体介绍一下它,下面这篇文章主要给大家介绍了关于VUE3使用JSON编辑器的详细图文教程,需要的朋友可以参考下
    2023-04-04

最新评论