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

最新推荐文章于 2024-03-18 15:25:47 发布

原创最新推荐文章于 2024-03-18 15:25:47 发布 · 4.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue #前端 #elementui

vue 专栏收录该内容

7 篇文章

订阅专栏

博客围绕vue中el-date-picker组件展开，该组件新建时选日期能正常显示，但修改资料赋值后选日期数据无法更新。经分析是绑定事件问题，尝试用blur事件虽能更新数据，但清空事件失效，最终选用input事件，解决了数据更新和清空的问题。

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。