Vue element 日期选择器 el-date-picker自定义可选范围

需求：防止时间范围内的查询到数据过多，希望设置最大可选一周的是时间范围

完成效果：见下图

查看官方文档，disabledDate中，time.getTime() 的范围既是禁用的时间范围

pickerOptions: {
    disabledDate(time) {
        return time.getTime() > Date.now();
    },
}

知道了怎么禁用时间，想要达到预期的效果，要拿到第一次选择的日期

查看element文档，onPick可返回每次选中的时间

disabledDate(time) {
    let timeOptionRange = vue.timeOptionRange;
    let secondNum = 60*60*24*7*1000;
    if(timeOptionRange){
        return time.getTime() > timeOptionRange.getTime() + secondNum || time.getTime() < timeOptionRange.getTime() - secondNum ;
    }
},
onPick(time){
    //当第一时间选中才设置禁用
    if(time.minDate && !time.maxDate){
        vue.timeOptionRange = time.minDate;
    }
    if(time.maxDate){
        vue.timeOptionRange = null;
    }
}

此处有个知识点，在 onPick 和 disabledDate 直接用 this 拿到的是 el-date-picker 实例

查了下资料，如下可获取组件的 vue 实例

data(){
    var vue = this;
    return {}
}

这样问题就解决了