解決vue中el-date-picker?type=daterange日期不回顯的問題
更新時間：2022年10月11日 14:43:07 作者：Double.楊
這篇文章主要介紹了解決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="結束日期" ? ></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="結束日期" ? ? @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進行范圍選擇時，在日期選擇面板中選定起始與結束的日期，默認會使用該日期的00:00:00作為起始與結束的時刻；通過選項default-time可以控制選中起始與結束日期時所使用的具體時刻。
default-time接受一個數(shù)組，數(shù)組每項值為字符串，形如12:00:00，其中第一項控制起始日期的具體時刻，第二項控制結束日期的具體時刻。
<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="結束日期"
: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ù)組不是響應式的所以直接應返回的值直接賦值是沒有效果的
使用如下方法解決問題：
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)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
在現(xiàn)代的前端開發(fā)中,用戶體驗的重要性不言而喻,為了讓應用程序更加生動和引人注目,動畫和過渡效果是必不可少的元素,本文將以 Vue3 為基礎,深入探討如何在應用程序中實現(xiàn)動畫過渡,以及一些技巧和最佳實踐,需要的朋友可以參考下2025-01-01
Vue.js教程之a(chǎn)xios與網(wǎng)絡傳輸?shù)膶W習實踐
這篇文章主要給大家介紹了Vue.js之a(chǎn)xios與網(wǎng)絡傳輸?shù)南嚓P資料，文中介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面跟隨小編一起來學習學習吧。2017-04-04
這篇文章主要給大家介紹了關于vue設置頁面背景及背景圖片的相關資料,在Vue項目開發(fā)中我們經(jīng)常要向頁面中添加背景圖片,文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下2023-08-08
在 Vue 中,如果需要將按鈕居中顯示,可以使用 CSS 中的 `text-align: center` 屬性來實現(xiàn),本文通過實例代碼給大家介紹Vue 按鈕居中、按鈕居左、按鈕居右的實現(xiàn)代碼,感興趣的朋友一起看看吧2023-10-10
使用Vue3實現(xiàn)交互式雷達圖的代碼實現(xiàn)
雷達圖是一種可視化數(shù)據(jù)的方式,用于比較多個類別中不同指標的相對值,它適用于需要展示多個指標之間的關系和差異的場景,本文給大家介紹了如何用Vue3輕松創(chuàng)建交互式雷達圖,需要的朋友可以參考下2024-06-06
這篇文章主要介紹了vue-cli腳手架創(chuàng)建項目遇到的坑及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
富文本編輯器作為直接與用戶交互的內(nèi)容輸入生產(chǎn)工具,對大家的項目來說非常重要,下面這篇文章主要給大家介紹了關于vue3中使用editor.js的詳細步驟,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了VUE組件 之 Drawer 抽屜 ，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08
這篇文章主要介紹了vuejs對接后端踩過的坑記錄,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
這篇文章主要介紹了淺談Vue數(shù)據(jù)響應，Vue的數(shù)據(jù)響應主要是依賴了Object.defineProperty()，下面就具體來介紹一下如何實現(xiàn)數(shù)據(jù)響應2018-11-11