Vue Element UI 日历组件实现日程安排与区间查询

3. 数据绑定与计算

数据层面，通过 watch 监听日期变化并格式化存储，同时利用 computed 属性根据当前选中的日期从任务列表中筛选出对应日程。

watch: {
  日期：function(newVal, oldVal) {
    this.Jobdata['日期'] = moment(newVal).format("YYYY-MM-DD");
  }
},
computed: {
  formatSchedule() {
    return data => {
      return this.list.filter(ele => {
        let time = ele['日期'];
        return moment(time).isSame(data.day);
      });
    };
  }
}

这里用到了 moment 库来处理日期比较，确保格式统一。

4. 工具函数与接口调用

最后，封装一个获取当月起止日期的工具函数，配合后端接口请求数据，实现动态加载。

/**
 * 获得本月的开始日期和结束日期
 */
export function getMonthStartDateAndDateRange(time) {
  let oneDayLong = 24 * 60 * 60 * 1000;
  let now = time;
  let year = now.getFullYear();
  let monthStartDate = new Date(year, now.getMonth(), 1);
  let nextMonthStartDate = new Date(year, now.getMonth() + 1, 1);
  let days = (nextMonthStartDate.getTime() - monthStartDate.getTime()) / oneDayLong;
  let monthEndDate = new Date(year, now.getMonth() + 1, days);
  let monthRange = [moment(monthStartDate).format("YYYY-MM-DD"), moment(monthEndDate).format("YYYY-MM-DD")];
  return monthRange;
}

GetJobset() {
  Personnel.GetJobcontext(
    getMonthStartDateAndDateRange(this.日期)[0],
    getMonthStartDateAndDateRange(this.日期)[1],
    this.Jobdata['部门 id']
  ).then(response => {
    this.list = response.data.data;
  });
}

这样整个流程就闭环了：用户操作日历 -> 触发事件 -> 更新数据 -> 重新渲染列表。实际开发中记得处理好部门 ID 为空时的边界情况，避免无效请求。