基于elementui的工作日，休息日的日历组件

Element UI 本身不提供直接的工作日与休息日设置功能，但您可以通过自定义方法实现。以下是一个简单的示例，展示如何在 Element UI 的 Calendar 组件上标记工作日和休息日。

首先，确保您已经安装并正确引入了 Element UI。

<template>
  <el-calendar :range="range" :first-day-of-week="1" :data="events"></el-calendar>
</template>
 
<script>
export default {
  data() {
    return {
      range: [],
      events: [],
      workDays: [1, 2, 3, 4, 5], // 工作日, 1 代表星期一
      restDays: [6, 7] // 休息日, 6 代表星期六
    };
  },
  created() {
    this.range = [this.getStartDate(), this.getEndDate()];
    this.events = this.getEvents();
  },
  methods: {
    getStartDate() {
      const now = new Date();
      let startDate = new Date(now.getFullYear(), now.getMonth(), 1);
      while (!this.workDays.includes(startDate.getDay())) {
        startDate.setDate(startDate.getDate() + 1);
      }
      return startDate;
    },
    getEndDate() {
      const now = new Date();
      let endDate = new Date(now.getFullYear(), now.getMonth() + 1, 0);
      while (!this.workDays.includes(endDate.getDay())) {
        endDate.setDate(endDate.getDate() - 1);
      }
      return endDate;
    },
    getEvents() {
      const events = [];
      let currentDate = new Date(this.range[0]);
      while (currentDate <= this.range[1]) {
        if (this.workDays.includes(currentDate.getDay())) {
          events.push({ date: new Date(currentDate), type: 'workday' });
        } else if (this.restDays.includes(currentDate.getDay())) {
          events.push({ date: new Date(currentDate), type: 'restday' });
        }
        currentDate.setDate(currentDate.getDate() + 1);
      }
      return events;
    }
  }
};
</script>
 
<style>
.el-calendar-day {
  position: relative;
}
.workday::after {
  content: '工';
  position: absolute;
  right: 0;
  color: #67c23a;
}
.restday::after {
  content: '休';
  position: absolute;
  right: 0;
  color: #f56c6c;
}
</style>

在上述代码中，我们定义了两个数组 workDays 和 restDays 来表示工作日和休息日。在 created 钩子中，我们计算当前月份的开始日期和结束日期，并构造了一个事件数组，包含了所有工作日和休息日的标记。然后，我们通过 CSS 伪元素在日历中对应的日期后面添加标记。

请注意，您可能需要根据实际需求调整 workDays 和 restDays 数组中的值，以及 CSS 样式来满足您的设计要求。