vue中el-date-picker type=daterange日期清空时不回显的解决
vue中el-date-picker type=daterange日期清空时不回显
<div class="search-brank"> <label style="cursor:pointer;" @click="search"><i class="icon-date"></i></label> <el-date-picker :editable='false' v-model="datetime" type="daterange" unlink-panels class="datePickers" start-placeholder="开始日 期" end-placeholder="结束日期" @change="handleDate" :picker-options="pickerOptions0" clearable> </el-date-picker> </div>
赋值函数:
handleDate(){ if(this.datetime[0]!=null){ this.starttime=this.formDate(this.datetime[0]); this.endtime=this.formDate(this.datetime[1]); }else{ this.starttime=''; this.endtime=''; } },
问题:当控件清空或修改时,@change=“handleDate”不会触发,datetime并不会实时更新。并且实际上,如果清空了datetime是null,并没有this.datetime[0]=null,this.datetime[1]=null的说法。
解决:使用@input=“immediUpdate”。
<div class="search-brank"> <label style="cursor:pointer;" @click="search"><i class="icon-date"></i></label> <el-date-picker :editable='false' v-model="datetime" type="daterange" unlink-panels class="datePickers" start-placeholder="开始日 期" end-placeholder="结束日期" @input="immediUpdate" :picker-options="pickerOptions0" clearable> </el-date-picker> </div>
immediUpdate(e) { this.$nextTick(() => { if(e==null){ this.starttime=''; this.endtime=''; }else{ this.$set(this,"datetime", [e[0], e[1]]); this.starttime=this.formDate(this.datetime[0]); this.endtime=this.formDate(this.datetime[1]); } }); },
vue element-ui el-date-picker日期选择器清空按钮的坑
watch监听选择器 点击清空按钮时会报错
这是因为Element-ui中没有内置清除按钮的回调函数, 当点击清除按钮的时候,value会被设置为null。
解决方法
在下次调用之前,为value重新赋值,错误解决,
if (!newData) { newData = [] }
然后在为value重新赋值前把开始日期和结束日期绑定的值置为空,就成功清除了:
watch: { time_value(newData) { if (!newData) { newData = [] this.startCreateTime = '' //开始日期 this.endCreateTime = '' //结束日期 } //日期格式转换 this.startCreateTime = this.$moment(newData[0]).format( 'YYYY-MM-DD HH:mm:ss' ) this.endCreateTime = this.$moment(newData[1]).format( 'YYYY-MM-DD HH:mm:ss' ) this.current = 1 this.initData() }, },
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
Vue3 使用Element Plus表格单选带checkbox功能
这篇文章主要介绍了Vue3 使用Element Plus表格单选带checkbox,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-11-11Vue中使用crypto-js AES对称加密算法实现加密解密
在数字加密算法中,通过可划分为对称加密和非对称加密,本文主要介绍了Vue中使用crypto-js AES对称加密算法实现加密解密,文中根据实例编码详细介绍的十分详尽,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2022-03-03
最新评论