vue el-date-picker 日期回显后无法改变问题解决

 更新时间:2023年04月11日 14:24:11   作者:阿wei程序媛  
这篇文章主要介绍了vue el-date-picker 日期回显后无法改变问题解决,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

场景描述:点击修改,数据回显渲染,后端返回我的是startTime和endTime,我需要将其处理,放到一个数组里面,并将其赋值

后端返回数据

   <el-form-item label="适用时间" prop="time1">
          <el-date-picker
            v-model="form.time1"
            type="datetimerange"
            style="width: 380px"
            :default-time="['00:00:00', '23:59:59']"
            range-separator="至"
            value-format="yyyy-MM-dd HH:mm:ss"
            :picker-options="expireTimeOPtion"
            @change="beginDateChange"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
 handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      var array=[]
      getfuelRates(id).then(response => {
        this.form = response.data;        
        array.push(response.data.startTime,response.data.endTime)
        this.form.time1=array
        this.open = true;
        this.title = "修改";
      });
    },

这样写,就会出现问题,数据回显成功之后,无法改变,如下图

解决方法:

  handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      var array=[]
      getfuelRates(id).then(response => {
        this.form = response.data;        
        array.push(response.data.startTime,response.data.endTime)
        this.$set(this.form,'time1',array);
        this.form.time1=array
        this.open = true;
        this.title = "修改";
      });
    },

 或者

  handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getfuelRates(id).then(response => {
        this.form = response.data;
        this.$set(this.form,'time1',[response.data.startTime,response.data.endTime]);
        this.form.time1=array
        this.open = true;
        this.title = "修改燃油附加费";
      });
    },

 重点代码:

this.$set(this.form,'time1',XXX);

以上就能实现,如下图

到此这篇关于vue el-date-picker 日期回显后无法改变的文章就介绍到这了,更多相关vue el-date-picker 日期回显内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue实现按钮级权限方案

    Vue实现按钮级权限方案

    这篇文章主要介绍了Vue按钮级权限方案,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-11-11
  • Vue中保存用户登录状态实例代码

    Vue中保存用户登录状态实例代码

    本篇文章主要介绍了Vue中保存用户登录状态实例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。、
    2017-06-06
  • 老生常谈Vue中的侦听器watch

    老生常谈Vue中的侦听器watch

    开发中我们在data返回的对象中定义了数据,这个数据通过插值语法等方式绑定到template中,这篇文章主要介绍了Vue中的侦听器watch,需要的朋友可以参考下
    2022-10-10
  • npm install sentry-cli失败的问题解决

    npm install sentry-cli失败的问题解决

    本文主要介绍了npm install sentry-cli失败的问题解决,文章首先描述了问题现象,然后分析了问题的原因,具有一定的参考价值,感兴趣的可以了解一下
    2023-08-08
  • 解析vue、angular深度作用选择器

    解析vue、angular深度作用选择器

    在 Vue 的开发中,我们经常会用到外部组件库,这篇文章主要介绍了vue、angular深度作用选择器,需要的朋友可以参考下
    2019-09-09
  • vue数组动态刷新失败问题及解决

    vue数组动态刷新失败问题及解决

    这篇文章主要介绍了vue数组动态刷新失败问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • Vue中Mixin的正确用法详解

    Vue中Mixin的正确用法详解

    众所周知,vue 的 mixins 是个非常灵活,但又很容易带来混乱的 API,Mixins 本该是一种强大的重用代码的手段,但使用之后往往带来更多的混乱,代码变得不易维护,本文就详细介绍Vue Mixin的正确用法,需要的朋友可以参考下
    2023-06-06
  • 理理Vue细节(推荐)

    理理Vue细节(推荐)

    这篇文章主要介绍了Vue细节,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • Vue3使用组合式API实现代码的逻辑复用

    Vue3使用组合式API实现代码的逻辑复用

    在 Vue 3 的生态中,组合式 API(Composition API)引入了全新的方式来构建组件,使得逻辑复用变得更加简单和灵活,在传统的选项API中,逻辑复用通常依赖于混入和高阶组件,本文将通过示例,带你了解如何在 Vue 3 中使用组合式 API 来实现代码的逻辑复用
    2025-01-01
  • VUE 记账凭证模块组件的示例代码

    VUE 记账凭证模块组件的示例代码

    这篇文章主要介绍了VUE记账凭证模块组件的实例代码,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-03-03

最新评论