需求:给出开始和结束日期生成多级表头,只显示当前日期范围内的季度和月份,日期外的不展示
先看下效果吧
html部分代码如下:
<!-- 循环年份,年度,季度,月度 -->
<el-table-column
v-for="(itemYear, indexYear) in tableHeaderData"
:key="itemYear"
prop=""
:label="itemYear.year + '年'"
align="center">
<el-table-column
v-for="(itemJidu, indexJidu) in itemYear.jidu"
:key="indexJidu"
prop="jidu"
:label="itemJidu.name"
align="center">
<el-table-column
v-for="(itemMonth, indexMonth) in itemYear.jidu[indexJidu].monthItem"
:key="indexMonth"
:prop="itemYear.year + itemMonth.monthEng"
:label="itemMonth.monthNum"
align="center"
:width="flexColumnWidth">
<template slot-scope="scope">
<div
:class="scope.row[itemYear.year + itemMonth.monthEng] == 1 ? 'cellStyle' : 'cellWhite'"
@click="cellItemClick(scope.row, scope.$index, itemYear.year + itemMonth.monthEng)"></div>
</template>
</el-table-column>
</el-table-column>
</el-table-column>
封装了一个生成表头tableHeaderData数据的公共方法
export function getYearAndMonthData(startDates,endDates){
const startDate = new Date(startDates);
const endDate = new Date(endDates);
const tableHeadData = [];
let monthEnglishArr = [
{
name:'一月',
monthEngShort:'jan',
number:1,
zhNumber:'一'
},
{
name:'二月',
monthEngShort:'feb',
number:2,
zhNumber:'二'
},
{
name:'三月',
monthEngShort:'mar',
number:3,
zhNumber:'三'
},
{
name:'四月',
monthEngShort:'apr',
number:4,
zhNumber:'四'
},
{
name:'五月',
monthEngShort:'may',
number:5,
zhNumber:'五'
},
{
name:'六月',
monthEngShort:'june',
number:6,
zhNumber:'六'
},
{
name:'七月',
monthEngShort:'july',
number:7,
zhNumber:'七'
},
{
name:'八月',
monthEngShort:'aug',
number:8,
zhNumber:'八'
},
{
name:'九月',
monthEngShort:'sep',
number:9,
zhNumber:'九'
},
{
name:'十月',
monthEngShort:'oct',
number:10,
zhNumber:'十'
},
{
name:'十一月',
monthEngShort:'nov',
number:11,
zhNumber:'十一'
},
{
name:'十二月',
monthEngShort:'dece',
number:12,
zhNumber:'十二'
},
]
// 循环年份
for (let year = startDate.getFullYear(); year <= endDate.getFullYear(); year++) {
const yearData = {
year: year.toString(),
jidu: [],
};
// 循环季度
for (let jiduIndex = 1; jiduIndex <= 4; jiduIndex++) {
const monthStartIndex = (jiduIndex - 1) * 3;
const monthEndIndex = monthStartIndex + 2;
const jiduMonth = [];
// 循环月份
for (let monthIndex = monthStartIndex; monthIndex <= monthEndIndex; monthIndex++) {
if (year === startDate.getFullYear() && monthIndex < startDate.getMonth()) {
continue;
}
if (year === endDate.getFullYear() && monthIndex > endDate.getMonth()) {
continue;
}
const monthCurName = new Date(year, monthIndex).toLocaleString('default', { month: 'long', locale: 'en' })
jiduMonth.push({
monthNum: monthIndex+1 + '月',
monthEng: monthEnglishArr.find(vals=>vals.name == monthCurName).monthEngShort,
});
}
let jiduName = monthEnglishArr.find(val=>val.number==jiduIndex).zhNumber
if (jiduMonth.length > 0) {
yearData.jidu.push({
name: `第${jiduName}季度`,
monthItem: jiduMonth,
});
}
}
if (yearData.jidu.length > 0) {
tableHeadData.push(yearData);
}
}
return tableHeadData
}
输出的结果为