vue?el-date-picker?日期回顯后無法改變問題解決
場景描述:點(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="開始日期" 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)問題,數(shù)據(jù)回顯成功之后,無法改變,如下圖
解決方法:
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 日期回顯后無法改變的文章就介紹到這了,更多相關(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日期不回顯的問題
- element日期選擇器el-date-picker樣式圖文詳解
- el-date-picker 選擇日期范圍只保存左側(cè)日期面板的實(shí)現(xiàn)代碼
相關(guān)文章
詳解解決使用axios發(fā)送json后臺(tái)接收不到的問題
這篇文章主要介紹了詳解解決使用axios發(fā)送json后臺(tái)接收不到的問題,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06vue+webpack 打包文件 404 頁面空白的解決方法
下面小編就為大家分享一篇vue+webpack 打包文件 404 頁面空白的解決方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02使用vue-cli創(chuàng)建項(xiàng)目并webpack打包的操作方法
本文給大家分享使用vue-cli創(chuàng)建項(xiàng)目基于webpack模板打包的配置方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2021-07-07用 Vue.js 遞歸組件實(shí)現(xiàn)可折疊的樹形菜單(demo)
通過本文給您演示一下如何有效地使用遞歸組件,我將通過建立一個(gè)可擴(kuò)展/收縮的樹形菜單的來一步步進(jìn)行。下面通過本文給大家分享用 Vue.js 遞歸組件實(shí)現(xiàn)可折疊的樹形菜單,需要的朋友參考下吧2017-12-12vue的.vue文件是怎么run起來的(vue-loader)
通過vue-loader,解析.vue文件,在webpack解析,拆解vue組件 ,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友參考下2018-12-12vue3使用el-radio-group獲取表格數(shù)據(jù)無法選中問題及解決方法
這篇文章主要介紹了vue3使用el-radio-group獲取表格數(shù)據(jù)無法選中問題及解決方法,本文給大家介紹的非常詳細(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