开发中使用Element-ui遇到的坑

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();

}
这样，时间框，就默认显示了当前的时间。

 

转载于:https://www.cnblogs.com/auto123-num/p/9504850.html