给出一个开始日期和一个结束日期，生成日期范围内的所有年份、季度、月份的多级表头

需求：给出开始和结束日期生成多级表头，只显示当前日期范围内的季度和月份，日期外的不展示 

先看下效果吧

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
}

输出的结果为