## 废话不多说，线上效果图
问题形容：网上找了很久，都找不到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>