美文网首页
vue根据选择月份动态设置表头(Element-UI)

vue根据选择月份动态设置表头(Element-UI)

作者: Vivian_0430 | 来源:发表于2021-06-17 16:03 被阅读0次
<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>

相关文章

网友评论

      本文标题:vue根据选择月份动态设置表头(Element-UI)

      本文链接:https://www.haomeiwen.com/subject/wtzwsltx.html