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

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

相关文章

  • Vue3中的动画过渡实现技巧分享

    Vue3中的动画过渡实现技巧分享

    在现代的前端开发中,用户体验的重要性不言而喻,为了让应用程序更加生动和引人注目,动画和过渡效果是必不可少的元素,本文将以 Vue3 为基础,深入探讨如何在应用程序中实现动画过渡,以及一些技巧和最佳实践,需要的朋友可以参考下
    2025-01-01
  • Vue.js教程之axios与网络传输的学习实践

    Vue.js教程之axios与网络传输的学习实践

    这篇文章主要给大家介绍了Vue.js之axios与网络传输的相关资料,文中介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面跟随小编一起来学习学习吧。
    2017-04-04
  • vue设置页面背景及背景图片简单示例

    vue设置页面背景及背景图片简单示例

    这篇文章主要给大家介绍了关于vue设置页面背景及背景图片的相关资料,在Vue项目开发中我们经常要向页面中添加背景图片,文中通过代码示例介绍的非常详细,需要的朋友可以参考下
    2023-08-08
  • Vue 按钮居中、按钮居左、按钮居右的实现代码

    Vue 按钮居中、按钮居左、按钮居右的实现代码

    在 Vue 中,如果需要将按钮居中显示,可以使用 CSS 中的 `text-align: center` 属性来实现,本文通过实例代码给大家介绍Vue 按钮居中、按钮居左、按钮居右的实现代码,感兴趣的朋友一起看看吧
    2023-10-10
  • 使用Vue3实现交互式雷达图的代码实现

    使用Vue3实现交互式雷达图的代码实现

    雷达图是一种可视化数据的方式,用于比较多个类别中不同指标的相对值,它适用于需要展示多个指标之间的关系和差异的场景,本文给大家介绍了如何用Vue3轻松创建交互式雷达图,需要的朋友可以参考下
    2024-06-06
  • vue-cli脚手架创建项目遇到的坑及解决

    vue-cli脚手架创建项目遇到的坑及解决

    这篇文章主要介绍了vue-cli脚手架创建项目遇到的坑及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • vue3中使用editor.js的详细步骤记录

    vue3中使用editor.js的详细步骤记录

    富文本编辑器作为直接与用户交互的内容输入生产工具,对大家的项目来说非常重要,下面这篇文章主要给大家介绍了关于vue3中使用editor.js的详细步骤,需要的朋友可以参考下
    2024-01-01
  • VUE组件中的 Drawer 抽屉实现代码

    VUE组件中的 Drawer 抽屉实现代码

    这篇文章主要介绍了VUE组件 之 Drawer 抽屉 ,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08
  • vuejs对接后端踩过的坑记录

    vuejs对接后端踩过的坑记录

    这篇文章主要介绍了vuejs对接后端踩过的坑记录,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-12-12
  • 浅谈Vue数据响应

    浅谈Vue数据响应

    这篇文章主要介绍了浅谈Vue数据响应,Vue的数据响应主要是依赖了Object.defineProperty(),下面就具体来介绍一下如何实现数据响应
    2018-11-11

最新评论