vue根據(jù)選擇月份動(dòng)態(tài)設(shè)置表頭(Element-UI)

<template>
   ...
   <el-table-column v-for="(item, index) in tableHeaderArray" :key="index" :label="item" width="120" :prop="tableHeaderArray[index]">
      <el-table-column align="center" label="早" />
      <el-table-column align="center" label="中" />
      <el-table-column align="center" label="晚" />
   </el-table-column>
   ...
</template>

<script>
  ...
  data() {
    return {
      tableHeaderArray: []
    }
  },
  mounted (){
    const currentDate = new Date();
    const currentMonth = currentDate.getMonth();
    this.tableHeaderArray = this.getEveryDay(currentMonth);
  },
  methods: {
    getCountDays (m){
      const currentDate = new Date();
      currentDate.setMonth(m + 1);
      currentDate.setDate(0);
      return currentDate.getDate();
    },
    getEveryDay (m){
      const dayArray = [];
      const month = m +1;
      const day = this.getCountDays(m);
      for (let i = 1; i <= day; i++){
        dayArray.push(month + "月" + i + "日");
      }
      return dayArray;
    },
    handleMonthChange (val){
      this.tableHeaderArray = this.getEveryDay(val.getMonth());
    }
  }
  ...
</script>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容