element datepicker 多个值控制时间范围

Myth丶恋晨 2022-02-16 11:17 226阅读 0赞

应用场景：

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;
                    },
                };
            },
        },
    })

时间筛选实现。