用vue写一个请假情况的统计页面，代码实现

好的，以下是一个简单的 Vue 组件，用于展示请假情况的统计页面：

<template>
  <div>
    <h1>请假情况统计</h1>
    <table>
      <thead>
        <tr>
          <th>学生姓名</th>
          <th>请假理由</th>
          <th>请假天数</th>
          <th>请假时间</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="record in records" :key="record.id">
          <td>{{ record.name }}</td>
          <td>{{ record.reason }}</td>
          <td>{{ record.days }}</td>
          <td>{{ formatDate(record.date) }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      records: [
        {
          id: 1,
          name: '张三',
          reason: '生病',
          days: 3,
          date: '2022-05-01'
        },
        {
          id: 2,
          name: '李四',
          reason: '家里有事',
          days: 2,
          date: '2022-05-02'
        },
        {
          id: 3,
          name: '王五',
          reason: '参加比赛',
          days: 1,
          date: '2022-05-03'
        },
        {
          id: 4,
          name: '赵六',
          reason: '其它',
          days: 5,
          date: '2022-05-04'
        }
      ]
    }
  },
  methods: {
    formatDate(date) {
      const d = new Date(date)
      return `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}`
    }
  },
  computed: {
    totalDays() {
      return this.records.reduce((total, record) => total + record.days, 0)
    },
    averageDays() {
      return this.totalDays / this.records.length
    },
    maxDays() {
      return Math.max(...this.records.map(record => record.days))
    },
    minDays() {
      return Math.min(...this.records.map(record => record.days))
    }
  }
}
</script>

在这个组件中，我们首先通过 `records` 数组定义了一些请假记录，每个记录都有一个 `id`、`name`、`reason`、`days` 和 `date` 属性。分别表示学生姓名、请假理由、请假天数和请假时间。

在模板中，我们使用 `v-for` 指令遍历 `records` 数组，并展示每条记录的学生姓名、请假理由、请假天数和请假时间。为了更好的展示数据，我们使用了 `<table>` 元素来创建一个表格。

在组件中，我们还定义了一些计算属性，用于统计请假情况的一些数据：

- `totalDays`：计算所有请假记录的请假天数总和。
- `averageDays`：计算所有请假记录的平均请假天数。
- `maxDays`：计算所有请假记录的最长请假天数。
- `minDays`：计算所有请假记录的最短请假天数。

这些计算属性可以在模板中直接使用。我们还定义了一个 `formatDate` 方法，用于将日期格式化为 `YYYY-MM-DD` 的形式，以便更好的展示。

这个组件只是一个简单的示例，你还可以根据自己的需求自由扩展和修改。