vue中el-date-picker不回显问题

vue中el-date-picker 回显后无法更新数据

题问题描述:

el-date-picker在新建时可以选择日期正常显示,在修改资料时先进行查询资料详情,并给el-date-picker赋值后再进行操作选择日期会出现数据无法更新的情况

 <el-form-item label="培训日期" prop="timevalue">
     <el-date-picker
     style="width: 335px"
     v-model="planForm.timevalue"
     type="daterange"
     format="yyyy-MM-dd"
     range-separator="至"
     start-placeholder="开始日期"
      value-format="yyyy-MM-dd"
     :picker-options="pickerOptions"
     **@change="getpickerdata"**
     end-placeholder="结束日期">
   </el-date-picker>
  </el-form-item>

原因分析:造成这个bug的原因就是绑定的事件问题


解决方案:

查看官方文档后,就改用了另一种事件blur:(当 input 失去焦点时触发)

// 直接把上面的change换成blur
@blur="getpickerdata"

改过之后又测试发现这个是可以更新数据重新赋值了,但是el-date-picker组件中的清空事件又失效了。。。。。。

这很让人头大。。。。
在这里插入图片描述
但是但是不要慌,经过我多事件的测试 最终、最终选择了input事件

// 再把上面的blur换成input就完事了
@input="getpickerdata"

就是这简单的一行代码耗费了小半天的时间。。。。不过最终也是解决了修改数据不更新不重新赋值的情况,也修改了el-date-picker不清空的bug。

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
el-date-picker日期不回显问题可能是由于绑定的v-model已经改变,但是控件没有实时更新导致的。解决这个问题的方法有两种。一种是在input方法使用this.$set方法进行数据的更新,另一种是直接使用this.$set方法给v-model。 具体操作可以参考以下代码示例: ```html <el-date-picker v-model="formObj.formModel.deadTime" type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" @input="testClick"></el-date-picker> ``` 在input方法使用this.$set方法进行数据的更新: ```javascript methods: { testClick(newVal) { this.$set(this.formObj.formModel, "deadTime", newVal); } } ``` 或者直接使用this.$set方法给v-model: ```javascript methods: { testClick(newVal) { this.$set(this.formObj, "formModel", { deadTime: newVal }); } } ``` 以上方法都可以解决el-date-picker日期不回显问题。如果还有其他问题,请提供更多相关信息。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [vue.jsel-data-pickertype="daterange"修改日期的时候数据不回写的问题。](https://blog.csdn.net/wszhm123/article/details/97800087)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [el-date-picker选择后页面没有回显](https://blog.csdn.net/oldolder/article/details/125871547)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值