簡單設(shè)置el-date-picker的默認(rèn)當(dāng)前時間問題
設(shè)置el-date-picker的默認(rèn)當(dāng)前時間
這是顯示當(dāng)前時間,每次點開彈框都是當(dāng)前的時間實現(xiàn)效果很簡單
//html <el-form-item label="創(chuàng)建時間" :label-width="formLabelWidth" > <el-date-picker v-model="addForm.createDate" style="width:100%" type="datetime" placeholder="選擇日期" /> </el-form-item>
//data里的數(shù)據(jù) data(){ addForm:{ createDate:new Date() } } //點擊關(guān)閉的彈框 closeDialog() { this.addForm = {} this.addForm.createDate = new Date() },
el-date-picker 設(shè)置、讀取值
el-date-picker 設(shè)置默認(rèn)值
記一個DateTimePicker 日期時間選擇器的坑
今天遇到一個問題。用日期時間選擇器選擇后,在編輯頁面回顯的問題。
一、我們在取數(shù)據(jù)時
在一般的輸入框,我們都可以使用v-model中的值,直接賦值??墒沁@個時間選擇器卻不太一樣,因為,他對應(yīng)兩個值,一個開始時間,一個結(jié)束時間,以數(shù)組的形式存在v-model中。
取數(shù)據(jù)時,常常要這樣
二、在設(shè)置默認(rèn)值時
在回顯時,官方給的方法是
顯然,沒有后端會這樣返回數(shù)據(jù)。
三、解決方法
不管哪種方法,v-model綁定的默認(rèn)值,我們都應(yīng)該設(shè)置為空數(shù)組而不是空字符串。
1、(不推薦)
使用此種形式,分別為v-model綁定的數(shù)據(jù)賦值。
不推薦的原因:這樣雖然可以賦上值,但是
紅框處,卻不會顯示數(shù)據(jù),顯然,這樣是行不通的。
2、(推薦)
this.formDate = [response.data.taskStarTime, response.data.taskEndTime]
直接這樣賦值,就會完全顯示
文中的后端返回的數(shù)據(jù)格式
"taskStarTime":"2019-03-12 00:00:00",
"taskEndTime":"2019-04-25 00:00:00
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
- Vue3+ElementPlus el-date-picker設(shè)置可選時間范圍的示例代碼
- elementUI組件中el-date-picker限制時間范圍精確到小時的方法
- element組件el-date-picker禁用當(dāng)前時分秒之前的日期時間選擇
- element?ui時間日期選擇器el-date-picker報錯Prop?being?mutated:"placement"解決方式
- Vue3 elementUI如何修改el-date-picker默認(rèn)時間
- vue el-date-picker動態(tài)限制時間范圍案例詳解
- vue element-ui el-date-picker限制選擇時間為當(dāng)天之前的代碼
- el-date-picker時間清空值為null處理方案
相關(guān)文章
Vue 2.0 中依賴注入 provide/inject組合實戰(zhàn)
這篇文章主要介紹了Vue 2.0 依賴注入 provide/inject組合,本文通過實例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-06-06vue用Object.defineProperty手寫一個簡單的雙向綁定的示例
這篇文章主要介紹了用Object.defineProperty手寫一個簡單的雙向綁定的示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-07-07