记录改造elementui日历组件实例（日报月报）

<template>
  <div>
    <el-calendar v-model="dateRange" @change="handleDateChange" ref="calendar"></el-calendar>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      dateRange: {
        startDate: null,
        endDate: null
      }
    };
  },
  methods: {
    handleDateChange(val) {
      const date = new Date(val);
      const startDate = new Date(date.getFullYear(), date.getMonth(), 1);
      const endDate = new Date(date.getFullYear(), date.getMonth() + 1, 0);
      this.dateRange = {
        startDate,
        endDate
      };
      // 调用接口获取数据
      this.fetchData(startDate, endDate);
    },
    fetchData(startDate, endDate) {
      // 这里替换成你的API调用逻辑
      console.log('获取数据:', startDate, endDate);
    }
  }
};
</script>

这个代码实例展示了如何使用Element UI的日历组件来改造成日报月报的形式。当用户选择一个日期时，handleDateChange 方法会计算出该月的起始和结束日期，并更新组件的 dateRange 数据。然后，它会调用 fetchData 方法来获取所选日期范围内的数据。这个例子简化了API调用部分，仅用控制台输出来模拟。在实际应用中，你需要替换 fetchData 方法以实现与后端的数据通信。