vue中el-date-picker type=daterange日期清空时不回显的解决
作者：qiuqiu1894
这篇文章主要介绍了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()
},
},总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。