快捷導(dǎo)航

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

更新時(shí)間：2023年07月18日 10:21:55 作者：qiuqiu1894

這篇文章主要介紹了vue中el-date-picker type=daterange日期清空時(shí)不回顯的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue中el-date-picker type=daterange日期清空時(shí)不回顯

             <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="結(jié)束日期" 
                    @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='';
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },

問題：當(dāng)控件清空或修改時(shí)，@change=“handleDate”不會(huì)觸發(fā)，datetime并不會(huì)實(shí)時(shí)更新。并且實(shí)際上，如果清空了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="結(jié)束日期"?
? ? ? ? ? ? ? ? ? ? @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)聽選擇器點(diǎn)擊清空按鈕時(shí)會(huì)報(bào)錯(cuò)

在這里插入圖片描述

這是因?yàn)镋lement-ui中沒有內(nèi)置清除按鈕的回調(diào)函數(shù), 當(dāng)點(diǎn)擊清除按鈕的時(shí)候，value會(huì)被設(shè)置為null。

解決方法

在下次調(diào)用之前，為value重新賦值，錯(cuò)誤解決，

      if (!newData) {
	        newData = []
	      }

然后在為value重新賦值前把開始日期和結(jié)束日期綁定的值置為空，就成功清除了：

watch: {
	    time_value(newData) {
	      if (!newData) {
	        newData = []
	       this.startCreateTime = '' //開始日期
	     this.endCreateTime = '' //結(jié)束日期
	      }
	      //日期格式轉(zhuǎn)換
	      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()
	    },
 },