写这个组件的时候。element el-date-picker 还没有 type="months" 可以选择多个月份的功能。现在若想选则多个月份，可直接使用element。本文仅做个记录。

一、直接使用el-date-picker  type="months"

讯享网

<div class="container"> <div class="block"> <span class="demonstration">周</span> <el-date-picker v-model="value1" type="week" format="yyyy 第 WW 周" placeholder="选择周"> </el-date-picker> </div> <div class="block"> <span class="demonstration">月</span> <el-date-picker v-model="value2" type="month" placeholder="选择月"> </el-date-picker> </div> </div> <div class="container"> <div class="block"> <span class="demonstration">年</span> <el-date-picker v-model="value3" type="year" placeholder="选择年"> </el-date-picker> </div> <div class="block"> <span class="demonstration">多个日期</span> <el-date-picker type="dates" v-model="value4" placeholder="选择一个或多个日期"> </el-date-picker> </div> </div> <div class="container"> <div class="block"> <span class="demonstration">多个月</span> <el-date-picker type="months" v-model="value5" placeholder="选择一个或多个月"> </el-date-picker> </div> <div class="block"> <span class="demonstration">多个年</span> <el-date-picker type="years" v-model="value6" placeholder="选择一个或多个年"> </el-date-picker> </div> </div> <script> export default { data() { return { value1: '', value2: '', value3: '', value4: '', value5: '', value6: '' }; } }; </script> 

 二、自己封装组件

1、新建组件  SelectMonths.vue

讯享网<template> <div id="boxArea" ref="selectMonths" class="selectMonthBoxSquare rel clearFixed"> <el-popover v-model="visible" placement="bottom" width="250" trigger="click" > <el-input slot="reference" v-model="inputValue" class="inputStyle" type="text" size="small" :placeholder="placeholder" readonly @focus="showBox = true"> <i slot="prefix" class="el-input__icon el-icon-date"></i> <i v-if="showClear" slot="suffix" class="el-input__icon el-icon-circle-close clearIconStyle" @click="resetMonth"></i> </el-input> <div class="selectContentBox"> <div class="contentArea"> <div class="flex flex-wrap flex-around" style="padding: 15px 0;border-bottom: 1px solid #e5e5e5;"> <div v-if="curIndex == DateList.length - 1" class="cursor el-icon-d-arrow-left" style="width: 15%; color: gray;" /> <div v-else class="cursor el-icon-d-arrow-left" style="width: 15%;" @click="reduceYear" /> <div>{ 
  
    
  { OneY }}年</div> <div v-if="curIndex == 0" class="cursor t-r el-icon-d-arrow-right" style="width: 15%; color: gray;" /> <div v-else class="cursor t-r el-icon-d-arrow-right" style="width: 15%;" @click="addYear" /> </div> <div class="conterList"> <el-checkbox-group v-model="optTime[curIndex].queryTime" class="flex flex-wrap" @change="onChange"> <el-row class="monthRow"> <el-col v-for="(item,index) in DateList[curIndex].queryTime" :key="index" :span="6" class="monthCol"> <el-checkbox :class="[{'today': item === currentM && curIndex === (DateList.length - 1) / 2}, 'onSelect flex-x-center']" :label="`${DateList[curIndex].TimeYear}-${(item<=9)?`0${item}`:item}`"> { 
  
    
  { monthMap[item] }}月 </el-checkbox> </el-col> </el-row> </el-checkbox-group> </div> </div> <div class="buttonBox t-r"> <el-button class="buttonStyle" size="mini" plain @click.stop="resetMonth">重置</el-button> <el-button class="buttonStyle" size="mini" type="primary" plain @click.stop="handleSubmit">确定</el-button> </div> </div> </el-popover> </div> </template> <script> export default { name: 'SelectMonths', props: { placeholder: { type: String, default: '请选择查询月份' } }, data() { return { DateList: [], // 年份月份数组 optTime: [], // 月份选中结果数组 OneY: '', // 当前年份 currentM: '', // 当前月份 curIndex: 0, // 当前年份下标值 optTimes: [], // 点击月份时的所有选中结果 resultTimes: [], // 点击“确定”按钮后的选择结果 showBox: false, // 是否显示月份选择弹框 visible: false, inputValue: '', // 输入框的绑定值 showClear: false, // 是否显示输入框右边的“清空”小图标 monthMap: { // 月份显示为中文 '1': '一', '2': '二', '3': '三', '4': '四', '5': '五', '6': '六', '7': '七', '8': '八', '9': '九', '10': '十', '11': '十一', '12': '十二' } } }, created() { this.init() }, mounted() { // 点击弹框外的任意位置关闭区域弹窗 document.addEventListener('click', (e) => { // 获取弹窗对象 const boxArea = document.getElementById('boxArea') // 判断弹窗对象中是否包含点击对象 if (boxArea && !boxArea.contains(e.target)) { // 判断当前选中月份与上次点击“确定”按钮时的选择结果是否一致 const equalArr = this.resultTimes.sort().toString() === this.optTimes.sort().toString() if (!equalArr) { // 如果不一致（因为是多选，所以必须是点击了“确定”按钮后才能进行查询）： // 将选择结果恢复到上次点击“确定”按钮时的结果 this.optTimes = this.resultTimes // 将输入框的值恢复到上次点击“确定”按钮时的值 this.inputValue = this.optTimes.join(',') // 根据输入框是否有值来判断清空图标是否渲染 this.showClear = !!this.inputValue !== '' // 将月份选中结果恢复到上次点击“确定”按钮时的选中月份 const _opt = this.resultTimes.map(v => { return v.substring(0, 4) }) for (const item in this.optTime) { this.optTime[item].queryTime = [] _opt.map((items, indexs) => { if (items === this.optTime[item].TimeYear) { this.optTime[item].queryTime.push(this.resultTimes[indexs]) } }) } } // 关闭弹框 this.showBox = false } }) }, methods: { // 初始化数据，获取前20年，然后循环 每一年里面都有12个月的 得到数组 opTime 和 DateList init() { const _this = this const _opt = [] const _optTime = [] const arr = new Array(12) const optDate = this.getDateList() optDate.map((item, index) => { // 月份选择时el-checkbox-group绑定的值 _optTime[index] = { TimeYear: item.value, queryTime: [] } // 给每一年份设置12个月份，el-checkbox初始化显示时使用 _opt[index] = { TimeYear: item.value, queryTime: [] } for (let i = 1; i <= arr.length; i++) { _opt[index].queryTime.push(i) } }) _this.optTime = _optTime _this.DateList = _opt _this.curIndex = (_this.DateList.length - 1) / 2 // console.log('_this.curIndex', _this.curIndex) }, // 获取近20年年份列表，倒序排列，最新一年在最前面 getDateList() { const Dates = new Date() const year = Dates.getFullYear() this.OneY = year this.currentM = Dates.getMonth() + 1 const startyear = Dates.getFullYear() - 20 const endyear = Dates.getFullYear() + 20 const Years = [] for (let i = startyear; i <= endyear; i++) { const currentYear = { key: i, value: i } Years.push(currentYear) } return Years.reverse() }, // 确定 handleSubmit() { const _this = this // 更新输入框的值 _this.inputValue = _this.optTimes.join(',') // 根据输入框是否有值来判断清空图标是否渲染 _this.showClear = !!_this.inputValue !== '' // 将点击“确定”按钮的选择结果保存起来（该值将在哪里使用：在点击弹框以外区域关闭弹框时使用，mounted中） _this.resultTimes = _this.optTimes // 关闭弹框 _this.showBox = false _this.visible = false _this.$emit('submitBtn', _this.resultTimes) }, // 重置 resetMonth() { const _this = this // 将年份重置到当前年份 const Dates = new Date() const year = Dates.getFullYear() _this.OneY = year _this.curIndex = (_this.DateList.length - 1) / 2 // 将已选择的月份清空 _this.optTimes = [] for (const i in _this.optTime) { _this.optTime[i].queryTime = [] } // 将输入框清空 _this.inputValue = '' // 根据输入框是否有值来判断清空图标是否渲染，此处必然不渲染 this.showClear = false // 将点击“确定”按钮的选择结果清空 _this.resultTimes = [] // 关闭月份选择弹框 _this.showBox = false _this.visible = false _this.$emit('resetBtn', _this.resultTimes) }, // 左上角年份减少 reduceYear() { const _this = this // 如果已经是最后一年了，则年份不能再减少了 if (_this.curIndex === _this.DateList.length - 1) return // 当前下标值+1，根据下标值获取年份值 _this.curIndex = _this.curIndex + 1 _this.OneY = _this.DateList[_this.curIndex].TimeYear }, // 左上角年份增加 addYear() { const _this = this // 如果已经是当前年份了，则年份不能再增加了 if (_this.curIndex === 0) return // 当前下标值-1，根据下标值获取年份值 _this.curIndex = _this.curIndex - 1 _this.OneY = _this.DateList[_this.curIndex].TimeYear }, // 选择月份 onChange() { const _this = this // 遍历optTime中已选择的月份，将已选结果塞到optTimes数组中 const _opt = _this.optTime const arr = [] for (const item in _opt) { if (_opt[item].queryTime.length > 0) _opt[item].queryTime.filter(v => { arr.push(v) }) } _this.optTimes = arr // 更新输入框的值 _this.inputValue = _this.optTimes.join(',') // 根据输入框是否有值来判断清空图标是否渲染 _this.showClear = !!_this.inputValue !== '' } } } </script> <style lang="scss" scoped> .flex { display: -webkit-box; display: -webkit-flex; display: flex; justify-content: center; } .flex-wrap { flex-wrap: wrap; } .flex-around { justify-content: space-around; } .flex-x-center { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .selectMonthBoxSquare { // width: 250px; width: 100%; .selectContentBox { position: absolute; top: 35px; left: 0; z-index: 2021; background: #ffffff; border: 1px solid #e5e5e5; border-radius: 3px; .contentArea { width: 330px; } } } .inputStyle { width: 100%; } .clearIconStyle { display: none; } .inputStyle:hover .clearIconStyle{ display: block; } .conterList{ .monthCol{ .today { color: #1890ff; } } .onSelect{ // width: 25% !important; padding:3px 0; margin: 20px 0 !important; } } ::v-deep .el-checkbox__input { display: none !important; } ::v-deep .el-checkbox__label { padding-left: 0px !important; } ::v-deep .el-checkbox__input.is-checked + .el-checkbox__label { color: #fff; } label.el-checkbox.onSelect.flex-x-center.is-checked { background: #409EFF; width: 50px; border-radius: 15px; } .lableStyle { font-size: 14px; } .el-button--mini { padding: 5px 15px; font-size: 12px; border-radius: 3px; } .buttonBox { border-top: 1px solid #e5e5e5; padding: 10px; display: flex; justify-content: flex-end; } </style> 

 2、使用组件  SelectMonths

<template> <div class="app-container"> <div> <span class="label">月份：</span> <SelectMonths ref="selectMonths" v-model="monthsValue" placeholder="请选择月份" @submitBtn="submitBtn" @resetBtn="resetBtn" /> </div> </div> </template> <script> import SelectMonths from '@/components/SelectMonths' export default { components: { SelectMonths }, data() { return { monthsValue: null } }, methods: { submitBtn(val) { const months = JSON.parse(JSON.stringify(val)) const monthsArr = months.map(item => { return item.concat('-01') }) this.monthsValue = monthsArr.join(',') }, resetBtn() { this.monthsValue = null }, } } </script>