el-calendar显示考勤信息

el-calendar是一个Vue.js组件，用于显示日历。要在日历上显示考勤信息，您可以将考勤数据存储在数组中，并将其传递给el-calendar组件。然后，您可以使用scoped slot来自定义每个日历单元格的内容，以显示适当的考勤信息。

以下是一个简单的示例代码，用于在el-calendar中显示考勤信息：

<template>
  <el-calendar :value="currentDate">
    <template slot-scope="{ date }">
      <div class="day">
        {{ date.getDate() }}
        <div v-if="attendance[date.getMonth()][date.getDate()]">{{ attendance[date.getMonth()][date.getDate()] }}</div>
      </div>
    </template>
  </el-calendar>
</template>

<script>
export default {
  data() {
    return {
      currentDate: new Date(),
      attendance: [
        [null, "出勤", "请假", "出差", "出勤", "出勤", "请假"],
        ["出勤", "请假", "出勤", "出差", "出勤", "出勤", "请假"],
        [null, "出勤", "出勤", "出差", "出勤", "出勤", "请假"],
        ["出勤", "出勤", "请假", "出差", "出勤", "出勤", "请假"],
        ["出勤", "出勤", "出勤", "出差", "请假", "出勤", "请假"],
        ["出勤", "请假", "出勤", "出差", "请假", "出勤", "请假"],
        [null, "出勤", "出勤", "出差", "请假", "出勤", "请假"],
      ],
    };
  },
};
</script>

在这个例子中，我们将考勤数据存储在一个二维数组中，每个数组元素表示一个月的考勤情况。我们使用slot-scope来访问el-calendar中每个日期的信息，并在需要时显示相应的考勤信息。您可以根据自己的需求自定义样式和显示内容。