element日历显示考勤

可以通过在Element UI中使用日历组件和表格组件来显示考勤信息。具体步骤如下：

1. 在页面中引入Element UI的日历组件和表格组件。

<template>
  <div>
    <el-calendar v-model="date" :range="range" @change="handleChange"></el-calendar>
    <el-table :data="attendanceList" style="width: 100%">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="date" label="日期"></el-table-column>
      <el-table-column prop="status" label="考勤状态"></el-table-column>
    </el-table>
  </div>
</template>

<script>
  import { Calendar, Table, TableColumn } from 'element-ui';

  export default {
    components: {
      'el-calendar': Calendar,
      'el-table': Table,
      'el-table-column': TableColumn
    },
    data() {
      return {
        date: null,
        range: false,
        attendanceList: [
          { name: '张三', date: '2021-05-01', status: '正常' },
          { name: '李四', date: '2021-05-01', status: '迟到' },
          { name: '王五', date: '2021-05-02', status: '旷工' },
          { name: '赵六', date: '2021-05-02', status: '请假' },
        ]
      };
    },
    methods: {
      handleChange() {
        // 根据日期筛选考勤信息并更新表格数据
        // ...
      }
    }
  }
</script>

2. 使用日历组件和表格组件分别显示考勤日期和考勤状态。

在上面的示例中，我们通过`attendanceList`数组来存储考勤信息，包括姓名、日期和考勤状态。在页面中，我们使用日历组件来显示考勤日期，使用表格组件来显示考勤状态。当用户选择一个日期时，我们可以通过`handleChange`方法根据选择的日期来筛选考勤信息并更新表格数据。

3. 根据实际需求定制样式和功能。

以上示例只是一个简单的示例，可以根据实际需求来定制样式和功能。例如，可以在表格中显示考勤时间、迟到/早退时间、加班时间等详细的考勤信息，也可以添加搜索、排序、分页等功能来方便用户查找和管理考勤信息。