关于element-ui:解决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
            };
        },
        // 格式化日期
        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>