问题需求:el-date-picker的默认格式是[‘2022-08’, ‘2023-01’],业务需求是首次打开页面,默认值为当前6个月,并以[‘2022-08’, ‘2022-09’, ‘2022-10’, ‘2022-11’, ‘2022-12’]的格式补全区间传递给后端。方法如下:
<el-date-picker
v-model="monthsList"
type="monthrange"
clearable
@change="chooseMonths"
value-format="yyyy-MM"
start-placeholder="起始月份"
range-separator="至"
end-placeholder="结束月份"
>
</el-date-picker>
// 补全默认的6个月
dealMonth() {
let arr = []
let thisMonth = this.$moment(new Date()).format('yyyy-MM')
// let thisMonth = '2023-01'
let str1 = thisMonth.substring(0, 4)
let num1 = thisMonth.substring(5, 7)
arr.push(thisMonth)
if (Number(num1) >= 6) {
for (let i = 1; i < 6; i++) {
arr.push(str1 + '-' + (Number(num1) - i + '').padStart(2, '0'))
}
} else {
for (let i = 1; i < 6; i++) {
if (Number(num1) - i > 0) {
arr.push(str1 + '-' + (Number(num1) - i + '').padStart(2, '0'))
} else {
let str2 = Number(str1) - 1
for (let j = 12; j > 0; j--) {
if (arr.length >= 6) {
break
}
arr.push(str2 + '-' + (Number(j) + '').padStart(2, '0'))
}
}
}
}
this.$nextTick((_) => {
this.searchTime = [arr[arr.length - 1], arr[0]]
return arr
})
return arr
},
created() {
this.monthsList=[arr[arr.length - 1], arr[0]]
this.monthsArr = this.dealMonth()
//加载后时间为默认当前的6个月
},
如果时间发生改变,需要重新按顺序补全,见另外一篇博客
《对于elementui的el-date-picker月份选择器,补全时间区间》