解决 vue中el-date-picker type=daterange日期清空时不回显问题
<div class="search-brank"><label style="cursor:pointer;"@click="search"><i class="icon-date"></i></label><el-date-pick...
·
<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]);
}
});
},
更多推荐
已为社区贡献2条内容
所有评论(0)