解決vue中el-date-picker?type=daterange日期不回顯的問題
vue中el-date-picker type=daterange日期不回顯
原始代碼
<el-form-item class="form_bigt_p" label="項目起止時間:" 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>
由于后臺返回的數(shù)據(jù)是兩個 yyyy-mm-dd 格式的日期(startTime,endTime)，因此一開始采用
this.ruleForm.time = [ ? this.baseDateTemp(res.data.startTime), ? this.baseDateTemp(res.data.endTime), ]; //this.baseDateTemp是全局的轉(zhuǎn)日期為時間戳的方法
問題發(fā)現(xiàn)及處理
問題
得到的日期可以渲染在 el-date-picker 上，但是修改的時候不會回顯
經(jīng)測試后發(fā)現(xiàn)，此時可以觸發(fā) input 方法，但不觸發(fā) change 方法
處理方式
在 input 方法中可知，修改時，el-date-picker 所綁定的 v-model 的值已經(jīng)改變，但是控件中沒有實時更新
最終選擇采用 this.$set 方法進行數(shù)據(jù)的更新，并成功解決此問題
修改后代碼如下
<el-form-item class="form_bigt_p" label="項目起止時間:" 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]]);
? ? ? });
? ? },
? ? // 將后臺獲取到的兩個日期轉(zhuǎn)為time的方法修改為
? ? ? ? this.$set(self.ruleForm, "time", [
? ? ? ? ? this.baseDateTemp(res.data.startTime),
? ? ? ? ? this.baseDateTemp(res.data.endTime)
? ? ? ? ]);el-date-picker 日期組件事件回顯不生效
日期組件回顯處理
使用datetimerange進行范圍選擇時，在日期選擇面板中選定起始與結(jié)束的日期，默認(rèn)會使用該日期的00:00:00作為起始與結(jié)束的時刻；通過選項default-time可以控制選中起始與結(jié)束日期時所使用的具體時刻。
default-time接受一個數(shù)組，數(shù)組每項值為字符串，形如12:00:00，其中第一項控制起始日期的具體時刻，第二項控制結(jié)束日期的具體時刻。
<div class="block">
<span class="demonstration">起始日期時刻為 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"
添加這個屬性拿到事件是 你選中在輸入框的書簡 那么
v-model="value1" 這個value1 就是數(shù)組形式存在
本文說明
日期組件時間回顯-相信很多人會遇到同一個問題-即使后臺返回的數(shù)據(jù)是 yyyy-MM-dd HH:mm:ss 這個形式直接賦值不生效的問題：
因為數(shù)組不是響應(yīng)式的所以直接應(yīng)返回的值直接賦值是沒有效果的
使用如下方法解決問題：
this.$set(this.value1,0,'你后臺返回的事件值yyyy-MM-dd HH:mm:ss') this.$set(this.value1,1,'你后臺返回的事件值yyyy-MM-dd HH:mm:ss') $set this.$set(原數(shù)組, 索引值, 需要賦的值)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue框架下部署上線后刷新報404問題解決方案,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-04
vue3中關(guān)于路由hash與History的設(shè)置
這篇文章主要介紹了vue3中關(guān)于路由hash與History的設(shè)置方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
vue-router vuex-oidc動態(tài)路由實例及功能詳解
這篇文章主要為大家介紹了vue-router vuex-oidc動態(tài)路由實例及功能詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-11-11
這篇文章主要介紹了vue-i18n實現(xiàn)中英文切換的方法，文中示例代碼非常詳細(xì)，幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
很多朋友遇到這樣的問題當(dāng)vue打包后顯示空白問題，遇到這樣的問題怎么處理呢？下面腳本之家小編給大家分享下vue打包后顯示空白正確處理方法，感興趣的朋友一起看看吧2017-11-11
vue響應(yīng)式Object代理對象的修改和刪除屬性
這篇文章主要為大家介紹了vue響應(yīng)式Object代理對象的修改和刪除屬性示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)輸入框自動跳轉(zhuǎn)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
Vue Element-ui實現(xiàn)樹形控件節(jié)點添加圖標(biāo)詳解
這篇文章主要為大家介紹了Element-ui實現(xiàn)樹形控件節(jié)點添加圖標(biāo)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
這篇文章主要介紹了Vuex模塊化和命名空間namespaced的相關(guān)知識，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-11-11
最近項目中有用到j(luò)son編輯器,我選用了這款vue的編輯器,看起來也是比較簡潔,接下來就具體介紹一下它,下面這篇文章主要給大家介紹了關(guān)于VUE3使用JSON編輯器的詳細(xì)圖文教程,需要的朋友可以參考下2023-04-04