el-calendar标注法定节假日

el-calendar 是基于 Element UI 的日历组件，用于在 Vue.js 项目中展示和管理日期。要在 el-calendar 上标注法定节假日，可以采取以下步骤：

1. 获取法定节假日数据：可以通过调用公共的节假日接口或者从数据库中获取法定节假日的日期。

2. 在组件中引入法定节假日数据：将获取的法定节假日数据引入到 el-calendar 组件中的 data 中。

3. 自定义日期样式：通过在 el-calendar 组件的 dateCellCustomClass 属性中自定义日期的样式，将法定节假日的日期应用特定的样式。

下面是一个示例代码片段，展示如何在 el-calendar 中标注法定节假日：

<template>
  <el-calendar
    v-model="selectedDate"
    :date-cell-custom-class="dateCellCustomClass"
  ></el-calendar>
</template>

<script>
export default {
  data() {
    return {
      selectedDate: new Date(),
      publicHolidays: ["2022-01-01", "2022-02-12", "2022-04-05"] // 假设这是从接口或数据库获取的法定节假日数据
    };
  },
  methods: {
    dateCellCustomClass(date) {
      const currentDate = date.toISOString().split("T");
      if (this.publicHolidays.includes(currentDate)) {
        return "public-holiday";
      }
      return "";
    }
  }
};
</script>

<style scoped>
.public-holiday {
  background-color: red; // 自定义法定节假日的日期样式
}
</style>

在上述代码中，我们假设 publicHolidays 是从接口或数据库获取的法定节假日数据，然后在 dateCellCustomClass 方法中，判断当前日期是否属于法定节假日，如果是则返回自定义的样式类名 "public-holiday"，从而将背景色设置为红色。

请注意，具体的法定节假日数据获取和样式定义需要根据实际情况进行调整。这只是一个简单示例，供参考。