element-ui,是一款基於vue2.0的快速構建框架的前端組件。使用起來方便快捷，非常適合快速開發。但是，使用別人的通用組件有一個通病，那便是，做自己的項目常常會有自己的需求，是和組件組件本身相沖的。這時候的你就會陷入是無盡的煩惱中，如何既可以使用這個組件又可以達到自己想要的效果。這里我開設一個帖子，來記錄我在項目開發中使用element-ui所遇到的坑，及解決方法。
1.element-ui中的日期時間選擇器DateTimePicker,它是由DatePicker和TimePicker派生的。
<el-date-picker
v-model="signdate"
type="date" ------------> 是一個日期控件
@change="dateChange" ----------> 當你選擇的日期發生改變的話，就會觸發這個事件
format = "yyyy-MM-dd HH:mm" -------> 在文本框中顯示的時間格式：年月日時分
value-format="timestamp" ---------> 選中后，代碼中希望拿到的時間格式 timestamp：時間戳格式；或者自定義：yyyy-MM-dd HH:mm:ss
:picker-options="pickerOptions" -------> 設置控件特定選項：比如出現快捷菜單，時間范圍設置
placeholder="選擇結束日期時間">
</el-date-picker>
注意：時間范圍設置，例如需求：可選擇的時間范圍在時間A~~時間B這段時間內；則pickerOptions應該如下設置
export default {
data () {
return {
pickerOptions:{
disabledDate: (time) => {
let beginDateVal = '2018-07-31';
let maxDateVal = '2018-09-31';
if (beginDateVal) {
return maxDateVal < time.getTime() || time.getTime() < beginDateVal;
}
}
},
}
}
注意這里面的關系是“或”的關系，表示這個時間控件只可以選擇2018-7-31~2018-9-31這段時間的中間的值；
2.DateTimePicker,選中時間的時候，時間框的值，默認為00:00:00，想要時間框的值顯示為當前時間。
控件有一個focus事件：當 input 獲得焦點時觸發；
可以定義一個變量defaultTime,;
<el-date-picker v-model="value1" @focus="getCurrentTime" type="datetime" :default-time="defaultTime" placeholder="選擇日期時間"> </el-date-picker>
事件內容：
getCurrentTime(){
this.defaultTime = new Date().toTimeString();
}
這樣，時間框，就默認顯示了當前的時間。