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属性赋予初始值。
}