vue?el-date-picker?日期回顯后無(wú)法改變問(wèn)題解決
場(chǎng)景描述:點(diǎn)擊修改,數(shù)據(jù)回顯渲染,后端返回我的是startTime和endTime,我需要將其處理,放到一個(gè)數(shù)組里面,并將其賦值
后端返回?cái)?shù)據(jù)
<el-form-item label="適用時(shí)間" prop="time1"> <el-date-picker v-model="form.time1" type="datetimerange" style="width: 380px" :default-time="['00:00:00', '23:59:59']" range-separator="至" value-format="yyyy-MM-dd HH:mm:ss" :picker-options="expireTimeOPtion" @change="beginDateChange" start-placeholder="開(kāi)始日期" end-placeholder="結(jié)束日期"> </el-date-picker> </el-form-item>
handleUpdate(row) { this.reset(); const id = row.id || this.ids var array=[] getfuelRates(id).then(response => { this.form = response.data; array.push(response.data.startTime,response.data.endTime) this.form.time1=array this.open = true; this.title = "修改"; }); },
這樣寫,就會(huì)出現(xiàn)問(wèn)題,數(shù)據(jù)回顯成功之后,無(wú)法改變,如下圖
解決方法:
handleUpdate(row) { this.reset(); const id = row.id || this.ids var array=[] getfuelRates(id).then(response => { this.form = response.data; array.push(response.data.startTime,response.data.endTime) this.$set(this.form,'time1',array); this.form.time1=array this.open = true; this.title = "修改"; }); },
或者
handleUpdate(row) { this.reset(); const id = row.id || this.ids getfuelRates(id).then(response => { this.form = response.data; this.$set(this.form,'time1',[response.data.startTime,response.data.endTime]); this.form.time1=array this.open = true; this.title = "修改燃油附加費(fèi)"; }); },
重點(diǎn)代碼:
this.$set(this.form,'time1',XXX);
以上就能實(shí)現(xiàn),如下圖
到此這篇關(guān)于vue el-date-picker 日期回顯后無(wú)法改變的文章就介紹到這了,更多相關(guān)vue el-date-picker 日期回顯內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- vue2使用el-date-picker實(shí)現(xiàn)動(dòng)態(tài)日期范圍demo
- el-date-picker日期范圍限制的實(shí)現(xiàn)
- el-date-picker日期選擇限制范圍的實(shí)例代碼
- Element?el-date-picker?日期選擇器的使用
- element組件el-date-picker禁用當(dāng)前時(shí)分秒之前的日期時(shí)間選擇
- 解決vue中el-date-picker?type=daterange日期不回顯的問(wèn)題
- element日期選擇器el-date-picker樣式圖文詳解
- el-date-picker 選擇日期范圍只保存左側(cè)日期面板的實(shí)現(xiàn)代碼
相關(guān)文章
詳解解決使用axios發(fā)送json后臺(tái)接收不到的問(wèn)題
這篇文章主要介紹了詳解解決使用axios發(fā)送json后臺(tái)接收不到的問(wèn)題,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06vue+webpack 打包文件 404 頁(yè)面空白的解決方法
下面小編就為大家分享一篇vue+webpack 打包文件 404 頁(yè)面空白的解決方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02使用vue-cli創(chuàng)建項(xiàng)目并webpack打包的操作方法
本文給大家分享使用vue-cli創(chuàng)建項(xiàng)目基于webpack模板打包的配置方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2021-07-07用 Vue.js 遞歸組件實(shí)現(xiàn)可折疊的樹(shù)形菜單(demo)
通過(guò)本文給您演示一下如何有效地使用遞歸組件,我將通過(guò)建立一個(gè)可擴(kuò)展/收縮的樹(shù)形菜單的來(lái)一步步進(jìn)行。下面通過(guò)本文給大家分享用 Vue.js 遞歸組件實(shí)現(xiàn)可折疊的樹(shù)形菜單,需要的朋友參考下吧2017-12-12vant van-list下拉加載更多onload事件問(wèn)題
這篇文章主要介紹了vant van-list下拉加載更多onload事件問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-01-01vue的.vue文件是怎么run起來(lái)的(vue-loader)
通過(guò)vue-loader,解析.vue文件,在webpack解析,拆解vue組件 ,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友參考下2018-12-12Vue3編程流暢技巧使用setup語(yǔ)法糖拒絕寫return
這篇文章主要為大家介紹了Vue3編程流暢技巧使用setup語(yǔ)法糖拒絕寫return的方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07Vue精美簡(jiǎn)潔登錄頁(yè)完整代碼實(shí)例
這篇文章主要給大家介紹了關(guān)于Vue精美簡(jiǎn)潔登錄頁(yè)完整代碼的相關(guān)資料,通過(guò)文中的方法大家可以使用實(shí)現(xiàn)簡(jiǎn)單的用戶登錄界面,下面通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07vue3使用el-radio-group獲取表格數(shù)據(jù)無(wú)法選中問(wèn)題及解決方法
這篇文章主要介紹了vue3使用el-radio-group獲取表格數(shù)據(jù)無(wú)法選中問(wèn)題及解決方法,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-05-05vue實(shí)現(xiàn)導(dǎo)航欄效果(選中狀態(tài)刷新不消失)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)導(dǎo)航欄效果,選中狀態(tài)刷新不消失,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-12-12