element-ui 时间动态禁用 多规则(实现思路)

先上实现效果:

 实际场景 需要用户 手动 去设置 时间范围 (可增删),而且 不允许交叉, 搜罗实现案例,大都是分开拆成单日历去实现

实现思路:

data:{
   watchPickerDisabled: {
                minDate: '',
                disabledArray: [],//禁用所需数组
                disabledObject: {}//禁用所需对象
            },

    //日期快捷选项配置项
    pickerOptions: {
                shortcuts: [],
                noShortcutsType: true,
                disabledDate: (time) => {
                     let disabled = this.watchPickerDisabled.disabledObject,
                        activeDate,
                        timer = time.getTime();
                         if (!this.watchPickerDisabled.minDate) {
                                for (let i = 0; Object.keys(disabled).length > i; i++) {
                                    
if (timer >= disable