前言

项目中遇到动态表头是真的多。导师不在的情况也很多。这时候只能抠破头皮上。

一、需求分析

如果当前月是1月

如果当前月是2月

如果当前月是3月

通过以上几张朴素的图片，相信你已经知道我们要做的东东是啥子了哟。

二、代码落地

 <template>
  <el-table :data="tableData">
    <el-table-column label="未来12月收入预测表">
      <el-table-column
        v-for="item in periodArr"
        :key="item.year"
        :label="item.year + '年'"
      >
        <el-table-column
          v-for="month in item.month"
          :key="month"
          prop=""
          :label="month + '月'"
        >
        </el-table-column>
      </el-table-column>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
    };
  },
  mounted() {
    console.log(this.periodArr);
  },
  computed: {
    periodArr() {
      // 获取当前年、月
      let td = new Date();
      let year = td.getFullYear();
      let month = td.getMonth() + 1;
      let years = [year];
      if (month > 1) {
        years.push(year + 1);
      }
      let periodArr = [];
      years.forEach((item, index) => {
        let y = item;
        let m = [];
        let mObj = {};
        // 如果未来12月只跨越一个年度
        if (index == 0) {
          for (let i = month; i <= 12; i++) {
            m.push(i);
          }
        }
        // 如果未来12月跨越两个年度
        if (index == 1) {
          for (let i = 1; i < month; i++) {
            m.push(i);
          }
        }
        mObj = { year: y, month: m };
        periodArr.push(mObj);
      });
      return periodArr;
    },
  },
};
</script>