簡單設(shè)置el-date-picker的默認當前時間問題
設(shè)置el-date-picker的默認當前時間

這是顯示當前時間,每次點開彈框都是當前的時間實現(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è)置默認值
記一個DateTimePicker 日期時間選擇器的坑
今天遇到一個問題。用日期時間選擇器選擇后,在編輯頁面回顯的問題。

一、我們在取數(shù)據(jù)時
在一般的輸入框,我們都可以使用v-model中的值,直接賦值。可是這個時間選擇器卻不太一樣,因為,他對應(yīng)兩個值,一個開始時間,一個結(jié)束時間,以數(shù)組的形式存在v-model中。

取數(shù)據(jù)時,常常要這樣
二、在設(shè)置默認值時
在回顯時,官方給的方法是

顯然,沒有后端會這樣返回數(shù)據(jù)。
三、解決方法
不管哪種方法,v-model綁定的默認值,我們都應(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禁用當前時分秒之前的日期時間選擇
- element?ui時間日期選擇器el-date-picker報錯Prop?being?mutated:"placement"解決方式
- Vue3 elementUI如何修改el-date-picker默認時間
- vue el-date-picker動態(tài)限制時間范圍案例詳解
- vue element-ui el-date-picker限制選擇時間為當天之前的代碼
- el-date-picker時間清空值為null處理方案
相關(guān)文章
Vue 2.0 中依賴注入 provide/inject組合實戰(zhàn)
這篇文章主要介紹了Vue 2.0 依賴注入 provide/inject組合,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-06-06
vue用Object.defineProperty手寫一個簡單的雙向綁定的示例
這篇文章主要介紹了用Object.defineProperty手寫一個簡單的雙向綁定的示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-07-07

