天天看點

Vue2.0 UI架構Element運用之DateTimePicker(el-date-picker)初始值及時間格式轉化等細節問題

Element運用之DateTimePicke<el-date-picker>初始值預設值設定及時間轉化問題

需求:

點選更新資訊按鈕,彈出的對話框中的時間選擇器預設選擇目前時間(後端傳回的是時間戳(this.plant.created_time))

Vue2.0 UI架構Element運用之DateTimePicker(el-date-picker)初始值及時間格式轉化等細節問題
Vue2.0 UI架構Element運用之DateTimePicker(el-date-picker)初始值及時間格式轉化等細節問題

注:手冊裡面說的 default-value,是當你點開選擇器之後預設選中的時間(如下圖)而不是初始紅框中顯示的時間。

Vue2.0 UI架構Element運用之DateTimePicker(el-date-picker)初始值及時間格式轉化等細節問題

是以本人使用v-model實作。

template:

Vue2.0 UI架構Element運用之DateTimePicker(el-date-picker)初始值及時間格式轉化等細節問題

data():

Vue2.0 UI架構Element運用之DateTimePicker(el-date-picker)初始值及時間格式轉化等細節問題

methods:

解釋

請從生命周期created()開始看代碼:首先記錄後端傳過來的時間戳格式化成标準時間的值,createdTimeFormat()是将時間戳轉為标準時間的函數,之是以要用new Date()格式化一下是因為el-date-picker隻接受傳入Date()類型的值,exit()函數用于點選dialog對話框關閉按鈕或點選取消按鈕時調用,用于還原初始值。

Vue2.0 UI架構Element運用之DateTimePicker(el-date-picker)初始值及時間格式轉化等細節問題

總結:遇到bug,結合文檔,注意參數值格式。

繼續閱讀