查询数据很多,又没有分页,当选择范围很大的时候,界面会极其卡顿,所以做个查询时间的限制。 现设置查询范围为前后一个月内,大概思路:
- 打开日期选择器时时间是不做限制的(超过当前日期后的日期不可选),可以任选一个日期或时间;
- 选中一个后,可选时间范围及时响应为它向前一个月或向后一个月。
主要代码如下:
<el-date-picker
v-model="value1"
type="datetimerange"
range-separator="至" start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="['08:30:00', '08:30:00']"
:picker-options="pickerOptions">
</el-date-picker>
/**vue2 data(){}中:**/
value1: '',
pickerOptions:{
onPick:({maxDate, minDate}) => {
console.log('maxDate=',maxDate)
console.log('minDate=',minDate)
this.value1 = maxDate ? maxDate.getTime():minDate ? minDate.getTime():''
},
disabledDate: (time) => {
if(this.value1){
const nowDate = new Date();
const curDate = this.value1
const startTime = new Date(curDate);
const endTime = new Date(curDate);
startTime.setMonth(startTime.getMonth() - 1);
endTime.setMonth(endTime.getMonth() + 1);
return time.getTime() < startTime.getTime() || time.getTime() > endTime.getTime() || time.getTime()>nowDate.getTime();
}
}
},