<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]);
}
});
},