解决elementui的DatePicker 日期选择器，带快捷选项（自定义12个月）的方法

## 废话不多说，线上效果图

问题描述：网上找了很久，都找不到elementui的DatePicker 日期选择器可以自定义某年某月的快捷选项，elementui的官网例子都是根据当前月份来做的快捷选项

1、自定义带快捷选项的12个月的方法

<template>
    <div class="kingPickerIndex" style="margin: 300px;">
        <el-date-picker
            :default-value="kingDefaultValue"
            popper-class="kingChangePickPanelPaBo"
            ref="elPicker"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            v-model="date"
            align="right"
            type="dates"
            placeholder="选择日期"
            :picker-options="pickerOptions"
        ></el-date-picker>
    </div>
</template>

<script>
export default {
    name: 'kingPicker',
    data() {
        return {
            date: null,
            kingDefaultValue: '',
            pickerOptions: {}
        };
    },
    computed: {
        monthList() {
            let monthList = [];
            for (var i = 1; i < 13; i++) {
                monthList.push({
                    label: `${i}月`,
                    value: i
                });
            }
            return monthList;
        }
    },
    mounted() {
        this.initpickerOptions();
    },
    methods: {
        // 初始化picker选择参数
        initpickerOptions() {
            let that = this;
            this.pickerOptions.shortcuts = [];
            // 给date选择器加上12个月的快捷方式
            this.monthList.forEach((item, index) => {
                this.pickerOptions.shortcuts[index] = {};
                this.pickerOptions.shortcuts[index]['text'] = item.label;
                this.pickerOptions.shortcuts[index]['onClick'] =(picker)=> {
                    // 获取选择器中的年份，
                    let curYear = that.$refs['elPicker'].picker.year;
                    // 月份则是用户点击哪个月就是哪个月
                    let curMonth = item.value;
                    // 获取用户选择某年某月的第一天和最后一天
                    let assignMoFiAndAf = that.getAssignMoFiAndAf(curYear, curMonth);
                    let curFirstDay = assignMoFiAndAf.kingFirstDay;
                    let curLastDay = assignMoFiAndAf.kingLastDay;
                    // 获取某年某月的所有日期
                    let curDays = that.getAllDate(curFirstDay, curLastDay);
                    let newcurDays = [];
                    // 设置picker的默认值，解决选择完某月的快捷方式后，重新打开picker后的显示问题
                    that.kingDefaultValue = curDays[0];
                    // 设置赋值给picker的时间值，只有这样才能设置成功（还有其他办法，请大神指教）
                    if (curDays.length > 0) {
                        curDays.forEach(item => {
                            newcurDays.push(new Date(new Date(item).setHours(0, 0, 0, 0)));
                        });
                    }
                    picker.$emit('pick', newcurDays);
                };
            });
        },
        // 获取指定月份的第一天和最后一天
        getAssignMoFiAndAf(y, m) {
            let firstDay = new Date(y, m - 1, 1);
            let lastDay = new Date(y, m, 0);
            let kingFirstDay = this.formatDate(firstDay, 'YYYY-MM-dd');
            let kingLastDay = this.formatDate(lastDay, 'YYYY-MM-dd');
            return {
                kingFirstDay,
                kingLastDay
            };
        },
        // 中国标准时间format yyyy-mm-dd
        formatAllDate(time) {
            let ymd = ''
            let mouth = (time.getMonth() + 1) >= 10 ? (time.getMonth() + 1) : ('0' + (time.getMonth() + 1))
            let day = time.getDate() >= 10 ? time.getDate() : ('0' + time.getDate())
            ymd += time.getFullYear() + '-' // 获取年份。
            ymd += mouth + '-' // 获取月份。
            ymd += day // 获取日。
            return ymd // 返回日期。
        },
        // 格式化日期
        formatDate(date, type) {
            date = new Date(date);
            let myyear = date.getFullYear();
            let mymonth = date.getMonth() + 1;
            let myweekday = date.getDate();
            if (!!type) {
                mymonth < 10 ? (mymonth = '0' + mymonth) : mymonth;
                myweekday < 10 ? (myweekday = '0' + myweekday) : myweekday;
                if (type == 'YYYY-MM-dd') {
                    return `${myyear}-${mymonth}-${myweekday}`;
                } else {
                    return `${myyear}-${mymonth}-${myweekday}`;
                }
            } else {
                return `${mymonth}月${myweekday}日`;
            }
        },
        /*
         **获取开始和结束日期中间的所有日期(包括开始和结束日期)
         **start:开始日期(yyyy-mm-dd)
         **end:结束日期(yyyy-mm-dd)
         */
        getAllDate(start, end) {
            let dateArr = [];
            let startArr = start.split('-');
            let endArr = end.split('-');
            let db = new Date();
            db.setUTCFullYear(startArr[0], startArr[1] - 1, startArr[2]);
            let de = new Date();
            de.setUTCFullYear(endArr[0], endArr[1] - 1, endArr[2]);
            let unixDb = db.getTime();
            let unixDe = de.getTime();
            let stamp;
            const oneDay = 24 * 60 * 60 * 1000;
            for (stamp = unixDb; stamp <= unixDe; ) {
                dateArr.push(this.formatAllDate(new Date(parseInt(stamp))));
                stamp = stamp + oneDay;
            }
            return dateArr;
        }
    }
};
</script>

<style lang="scss">
// 解决picker的快捷方式为12个月的时候，后面两个月在面板上面看不到的问题
.kingChangePickPanelPaBo {
    .el-picker-panel__body-wrapper {
        .el-picker-panel__sidebar {
            padding-bottom: 50px;
        }
    }
}
</style>