快捷導(dǎo)航

解決vue中el-date-picker?type=daterange日期不回顯的問題

更新時(shí)間：2022年10月11日 14:43:07 作者：Double.楊

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

vue中el-date-picker type=daterange日期不回顯

原始代碼

<el-form-item class="form_bigt_p" label="項(xiàng)目起止時(shí)間:" prop="time">
? <el-date-picker
? ? unlink-panels
? ? class="bigWidth"
? ? :disabled="isDisabled"
? ? v-model.trim="ruleForm.time"
? ? type="daterange"
? ? value-format="timestamp"
? ? range-separator="至"
? ? start-placeholder="開始日期"
? ? end-placeholder="結(jié)束日期"
? ></el-date-picker>
</el-form-item>

由于后臺(tái)返回的數(shù)據(jù)是兩個(gè) yyyy-mm-dd 格式的日期(startTime,endTime)，因此一開始采用

this.ruleForm.time = [
? this.baseDateTemp(res.data.startTime),
? this.baseDateTemp(res.data.endTime),
];
//this.baseDateTemp是全局的轉(zhuǎn)日期為時(shí)間戳的方法

問題發(fā)現(xiàn)及處理

問題

得到的日期可以渲染在 el-date-picker 上，但是修改的時(shí)候不會(huì)回顯

經(jīng)測(cè)試后發(fā)現(xiàn)，此時(shí)可以觸發(fā) input 方法，但不觸發(fā) change 方法

處理方式

在 input 方法中可知，修改時(shí)，el-date-picker 所綁定的 v-model 的值已經(jīng)改變，但是控件中沒有實(shí)時(shí)更新

最終選擇采用 this.$set 方法進(jìn)行數(shù)據(jù)的更新，并成功解決此問題

修改后代碼如下

<el-form-item class="form_bigt_p" label="項(xiàng)目起止時(shí)間:" prop="time">
? <el-date-picker
? ? unlink-panels
? ? class="bigWidth"
? ? :disabled="isDisabled"
? ? v-model.trim="ruleForm.time"
? ? type="daterange"
? ? value-format="timestamp"
? ? range-separator="至"
? ? start-placeholder="開始日期"
? ? end-placeholder="結(jié)束日期"
? ? @input="testClick"
? ></el-date-picker>
</el-form-item>

 testClick(e) {
? ? ? this.$nextTick(() => {
? ? ? ? this.ruleForm.time = null;
? ? ? ? this.$set(this.ruleForm, "time", [e[0], e[1]]);
? ? ? });
? ? },
? ? // 將后臺(tái)獲取到的兩個(gè)日期轉(zhuǎn)為time的方法修改為
? ? ? ? this.$set(self.ruleForm, "time", [
? ? ? ? ? this.baseDateTemp(res.data.startTime),
? ? ? ? ? this.baseDateTemp(res.data.endTime)
? ? ? ? ]);

el-date-picker 日期組件事件回顯不生效

日期組件回顯處理

使用datetimerange進(jìn)行范圍選擇時(shí)，在日期選擇面板中選定起始與結(jié)束的日期，默認(rèn)會(huì)使用該日期的00:00:00作為起始與結(jié)束的時(shí)刻；通過選項(xiàng)default-time可以控制選中起始與結(jié)束日期時(shí)所使用的具體時(shí)刻。

default-time接受一個(gè)數(shù)組，數(shù)組每項(xiàng)值為字符串，形如12:00:00，其中第一項(xiàng)控制起始日期的具體時(shí)刻，第二項(xiàng)控制結(jié)束日期的具體時(shí)刻。

  <div class="block">
    <span class="demonstration">起始日期時(shí)刻為 12:00:00</span>
    <el-date-picker
      v-model="value1"
      type="datetimerange"
      start-placeholder="開始日期"
      value-format="yyyy-MM-dd HH:mm:ss"
      end-placeholder="結(jié)束日期"
      :default-time="['12:00:00']">
    </el-date-picker>
  </div>

使用說明

value-format="yyyy-MM-dd HH:mm:ss"

添加這個(gè)屬性拿到事件是你選中在輸入框的書簡那么

v-model="value1" 這個(gè)value1  就是數(shù)組形式存在

本文說明

日期組件時(shí)間回顯-相信很多人會(huì)遇到同一個(gè)問題-即使后臺(tái)返回的數(shù)據(jù)是 yyyy-MM-dd HH:mm:ss 這個(gè)形式直接賦值不生效的問題：

因?yàn)閿?shù)組不是響應(yīng)式的所以直接應(yīng)返回的值直接賦值是沒有效果的

使用如下方法解決問題：

this.$set(this.value1,0,'你后臺(tái)返回的事件值yyyy-MM-dd HH:mm:ss')
this.$set(this.value1,1,'你后臺(tái)返回的事件值yyyy-MM-dd HH:mm:ss')
$set 
this.$set(原數(shù)組, 索引值, 需要賦的值)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: