el-form表单组件笔记（持续更新）

1 el-form-item

由于是管理平台，经常会使用到此组件，其与el-form配合使用，主要涉及rules,model, label-width, inline. 在其中可以嵌套各种输入组件，如下介绍：

1.1. rules

在el-form标签上添加rules检验逻辑，首先el-form会整个在监听此rules变化，【

在rules的值发生改变时，立刻自动调用this.validate(() => {})来触发校验，否则就是在rules改变时，只做removeValidateEvents,在做addValidateEvents操作

】；其次，在el-form-item里面会通过getRules方法获得，其将自身的rules和el-form的rules合并，此时【

rules有值的话并且required不等于undefined，addValidateEvents就开始监听el-form-blur和el-form-change了

】。

1.2 model

el-form的model是一个大属性，属于一个集合，里面包含可被el-from-item使用的小属性【v-model】，在form进行提交的时候统一提交。

1.3 label-width

会被传入el-form-item该值，可以为auto，如果el-form-item也设置了该值，就优先使用el-form-item的labelWidth

1.4 inline

如果inline为true就会加上相应的样式。

2 学习到的输入组件

2.1 <el-date-picker>时间选择组件

是时间选择组件，可以选择时间点、日期点，也可以选择时间范围、日期范围。

项目中我们需要设计携带快捷选择键的时间范围选择器，具有初始默认时间范围【T-1】。手下按构建此标签：

<el-date-picker
        v-model="属性名"
        type="datetimerange"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        range-separator="至"
        value-format="yyyy-MM-dd HH:mm:ss"
      ></el-date-picker>

 此时只能选择时间，添加快捷选择：

:picker-options="pickerOptions"

在data里添加pickerOptions属性，其中包含要添加的选择器：

pickerOptions:{
    shortcuts = [
      {
        text: 'A week ago',
        onClick(picker){
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime()-3600*1000*24*7);
            picker.$emit('pick', [start, end]);
        }
      },
      {
        text: 'A month ago',
        onClick(picker){
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime()-3600*1000*24*30);
            picker.$emit('pick', [start, end]);
        }
      },
      {
        text: 'Three month ago',
        onClick(picker){
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime()-3600*1000*24*90);
            picker.$emit('pick', [start, end]);
        }
      },
    ]
}

快捷键出现在组建的下拉框左侧中，在点击的时候会自动给绑定的时间属性赋值。 

添加默认时间：

在created或mounted中添加设置默认时间的方法：
getDefaultTime(){
    var now = new Date();
    var year = now.getFullYear();
    var month = now.getMonth();
    var date = now.getDate();
    if(month === 12){year++; month = 1;}//默认得到的是上一个月，所以要对月份进行处理
    else{month++;}
    month = month.toString().padStart(2, "0");//一位数的时候补零
    this.startdate = '${year}-${month}-${date-1} 00:00:00';//拼接日期
    this.enddate = '${year}-${month}-${date-1} 23:59:59';//拼接日期
    this.$set(this.属性所属属性, '属性名', [this.startdate, this,enddate]);//直接进行复制不可以，会导致输入不可更改，要用set属性赋予初始值。
}