vue中el-date-picker type=daterange日期清空時不回顯的解決

更新時間：2023年07月18日 10:21:55 作者：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>

賦值函數(shù)：

? ? ? ? ? ? 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”不會觸發(fā)，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監(jiān)聽選擇器點擊清空按鈕時會報錯

在這里插入圖片描述

這是因為Element-ui中沒有內置清除按鈕的回調函數(shù), 當點擊清除按鈕的時候，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()
	    },
 },