需求：
开始日期始终小于或等于结束日期
实现方式：
template中的结构如下：
// 开始时间
<el-date-picker
v-model="query.beginTime" value-format="yyyy-MM-dd"
type="date" placeholder="选择日期" @change="changeBeginTime">
</el-date-picker>
<span>至</span>
// 结束时间
<el-date-picker
v-model="query.endTime" value-format="yyyy-MM-dd"
type="date" :picker-options="pickerOptions"
placeholder="选择日期">
</el-date-picker>
通过pickerOptions限制结束日期。 pickerOptions为elementUI提供的属性，控制时日期禁用，此处用于控制结束日期，使得结束日期小于开始日期时的部分保持禁用状态。
data() {
return {
// 默认显示近三十天
query: {
beginTime: beforeDate(30),
endTime: newDate(),
},
// pickerOptions为elementUI提供的属性
pickerOptions: {
disabledDate: (time) => {
return time.getTime() < new Date(this.query.beginTime).getTime() - 1000 * 60 * 60 * 24;
}
},
}
},
监听开始时间的选择。 当开始时间大于当前结束时间的时候，主动对结束时间进行赋值，调整二者使其保持一致。
methods: {
// 调整开始时间
changeBeginTime(val) {
let beginTime = new Date(val).getTime();
let endTime = new Date(this.query.endTime).getTime();
if (beginTime > endTime) {
this.query.endTime = val;
}
}
}