解決vue中el-date-picker?type=daterange日期不回顯的問題
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>
由于后臺返回的數(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í)候不會回顯
經(jīng)測試后發(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]]);
? ? ? });
? ? },
? ? // 將后臺獲取到的兩個(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)會使用該日期的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í)間回顯-相信很多人會遇到同一個(gè)問題-即使后臺返回的數(shù)據(jù)是 yyyy-MM-dd HH:mm:ss 這個(gè)形式直接賦值不生效的問題：
因?yàn)閿?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ù)組, 索引值, 需要賦的值)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
- vue2使用el-date-picker實(shí)現(xiàn)動態(tài)日期范圍demo
- el-date-picker日期范圍限制的實(shí)現(xiàn)
- el-date-picker日期選擇限制范圍的實(shí)例代碼
- Element?el-date-picker?日期選擇器的使用
- vue?el-date-picker?日期回顯后無法改變問題解決
- element組件el-date-picker禁用當(dāng)前時(shí)分秒之前的日期時(shí)間選擇
- element日期選擇器el-date-picker樣式圖文詳解
- el-date-picker 選擇日期范圍只保存左側(cè)日期面板的實(shí)現(xiàn)代碼
相關(guān)文章
在現(xiàn)代的前端開發(fā)中,用戶體驗(yàn)的重要性不言而喻,為了讓應(yīng)用程序更加生動和引人注目,動畫和過渡效果是必不可少的元素,本文將以 Vue3 為基礎(chǔ),深入探討如何在應(yīng)用程序中實(shí)現(xiàn)動畫過渡,以及一些技巧和最佳實(shí)踐,需要的朋友可以參考下2025-01-01
Vue.js教程之a(chǎn)xios與網(wǎng)絡(luò)傳輸?shù)膶W(xué)習(xí)實(shí)踐
這篇文章主要給大家介紹了Vue.js之a(chǎn)xios與網(wǎng)絡(luò)傳輸?shù)南嚓P(guān)資料，文中介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟隨小編一起來學(xué)習(xí)學(xué)習(xí)吧。2017-04-04
這篇文章主要給大家介紹了關(guān)于vue設(shè)置頁面背景及背景圖片的相關(guān)資料,在Vue項(xiàng)目開發(fā)中我們經(jīng)常要向頁面中添加背景圖片,文中通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-08-08
Vue 按鈕居中、按鈕居左、按鈕居右的實(shí)現(xiàn)代碼
在 Vue 中,如果需要將按鈕居中顯示,可以使用 CSS 中的 `text-align: center` 屬性來實(shí)現(xiàn),本文通過實(shí)例代碼給大家介紹Vue 按鈕居中、按鈕居左、按鈕居右的實(shí)現(xiàn)代碼,感興趣的朋友一起看看吧2023-10-10
使用Vue3實(shí)現(xiàn)交互式雷達(dá)圖的代碼實(shí)現(xiàn)
雷達(dá)圖是一種可視化數(shù)據(jù)的方式,用于比較多個(gè)類別中不同指標(biāo)的相對值,它適用于需要展示多個(gè)指標(biāo)之間的關(guān)系和差異的場景,本文給大家介紹了如何用Vue3輕松創(chuàng)建交互式雷達(dá)圖,需要的朋友可以參考下2024-06-06
vue-cli腳手架創(chuàng)建項(xiàng)目遇到的坑及解決
這篇文章主要介紹了vue-cli腳手架創(chuàng)建項(xiàng)目遇到的坑及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
富文本編輯器作為直接與用戶交互的內(nèi)容輸入生產(chǎn)工具,對大家的項(xiàng)目來說非常重要,下面這篇文章主要給大家介紹了關(guān)于vue3中使用editor.js的詳細(xì)步驟,需要的朋友可以參考下2024-01-01
VUE組件中的 Drawer 抽屜實(shí)現(xiàn)代碼
這篇文章主要介紹了VUE組件 之 Drawer 抽屜 ，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08
這篇文章主要介紹了vuejs對接后端踩過的坑記錄,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12
這篇文章主要介紹了淺談Vue數(shù)據(jù)響應(yīng)，Vue的數(shù)據(jù)響應(yīng)主要是依賴了Object.defineProperty()，下面就具體來介紹一下如何實(shí)現(xiàn)數(shù)據(jù)響應(yīng)2018-11-11