element datepicker 多个值控制时间范围

应用场景：

datepicker的时间需要通过三个不同的属性来限制，

1.满足当前时间在rd返回的一个时间数组范围之内，可以为两端数据。

2.rd返回的这个数组中的每一个元素为一个对象，该对象包含了n个属性，其中有两个用来限制当前时间是否可以点击。

3.当且仅当该对象的hasReceived === true && hasSettlemented === false && 当前月份在该数组中才可以点击该月份。否则disabled。

落地代码：

<el-date-picker
    :disabled="pickerDisabled"
    :clearable="false"
    v-model="serviceMonth"
    type="month"
    value-format="yyyy-MM"
    placeholder="选择月份"
    :picker-options="pickerOptions"
    >
</el-date-picker>

通常我们会把pickerOptions放在data中，但是这样会有一个问题，pickerOptions只会在页面初始化的时候加载一次，等到数据后端数据返回再去加载是没法手动加载，所以把pickerOptions放在computd中。

this.timeRanger为rd返回的时间数组。

@Component({
    computed: {
        pickerOptions() {
            const _self = this;
            return {
                disabledDate: (time: string) => {
                    if (_self.$data.timeRanger.length > 0) {
                        const tarMonth = _self.$data.timeRanger.find(
                            (item: any) => item.serviceMonth === format(time, 'YYYY-MM'),
                        );
                        if (!tarMonth) {
                            return true;
                        }
                        return !(tarMonth.hasReceived && !tarMonth.hasSettlemented);
                    }
                    return true;
                },
            };
        },
    },
})

时间筛选实现。