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中使用的一些常见混淆用法,包括new Vue()、export default {}、createApp()等,以及如何使用混淆器对代码进行加固,需要的可以参考下
    2023-12-12
  • VUE父组件异步获取数据,子组件接收的值为空的问题

    VUE父组件异步获取数据,子组件接收的值为空的问题

    这篇文章主要介绍了VUE父组件异步获取数据,子组件接收的值为空的问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • Vue列表渲染的示例代码

    Vue列表渲染的示例代码

    这篇文章主要介绍了Vue列表渲染的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法

    Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法

    这篇文章主要介绍了Vue移动端用淘宝弹性布局lib-flexible插件做适配的操作方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-05-05
  • 详细对比Ember.js和Vue.js

    详细对比Ember.js和Vue.js

    这篇文章主要介绍了详细对比Ember.js和Vue.js,对JS框架感兴趣的同学,可以参考下
    2021-05-05
  • vue中如何使用xlsx读取excel文件实例代码

    vue中如何使用xlsx读取excel文件实例代码

    在Vue中使用xlsx库可以帮助我们读取和写入Excel文件,下面这篇文章主要给大家介绍了关于vue中如何使用xlsx读取excel文件的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-12-12
  • ant-design-vue中设置Table每页显示的条目数量方式

    ant-design-vue中设置Table每页显示的条目数量方式

    这篇文章主要介绍了ant-design-vue中设置Table每页显示的条目数量方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客

    Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客

    vuepress是尤大大4月12日发布的一个全新的基于vue的静态网站生成器,实际上就是一个vue的spa应用,内置webpack,可以用来写文档。这篇文章给大家介绍了VuePress搭建个人博客的过程,感兴趣的朋友一起看看吧
    2018-04-04
  • Vue.js常用指令汇总(v-if、v-for等)

    Vue.js常用指令汇总(v-if、v-for等)

    这篇文章主要为大家详细汇总了Vue.js常用指令及使用方法,包括v-if、v-for、v-show、v-bind、v-on等指令,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11
  • vue中引入mousewheel事件及兼容性处理方式

    vue中引入mousewheel事件及兼容性处理方式

    这篇文章主要介绍了vue中引入mousewheel事件及兼容性处理方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03

最新评论