当前位置：首页 > VUE

vue实现请假条

2026-01-20 10:49:44VUE

Vue 实现请假条功能

请假条功能通常涉及表单提交、数据验证和展示。以下是一个基于 Vue 的实现方案：

表单结构设计

使用 Vue 的模板语法构建请假表单：

<template>
  <div class="leave-request">
    <h3>请假申请</h3>
    <form @submit.prevent="submitLeaveRequest">
      <div class="form-group">
        <label>请假类型</label>
        <select v-model="leaveForm.type" required>
          <option value="sick">病假</option>
          <option value="personal">事假</option>
          <option value="annual">年假</option>
        </select>
      </div>

      <div class="form-group">
        <label>开始日期</label>
        <input type="date" v-model="leaveForm.startDate" required>
      </div>

      <div class="form-group">
        <label>结束日期</label>
        <input type="date" v-model="leaveForm.endDate" required>
      </div>

      <div class="form-group">
        <label>请假原因</label>
        <textarea v-model="leaveForm.reason" required></textarea>
      </div>

      <button type="submit">提交申请</button>
    </form>
  </div>
</template>

数据模型与验证

在 Vue 组件中定义数据模型和验证逻辑：

vue实现请假条

<script>
export default {
  data() {
    return {
      leaveForm: {
        type: 'personal',
        startDate: '',
        endDate: '',
        reason: ''
      }
    }
  },
  methods: {
    validateForm() {
      if (!this.leaveForm.startDate || !this.leaveForm.endDate) {
        alert('请填写完整日期');
        return false;
      }

      if (new Date(this.leaveForm.startDate) > new Date(this.leaveForm.endDate)) {
        alert('结束日期不能早于开始日期');
        return false;
      }

      return true;
    },
    submitLeaveRequest() {
      if (!this.validateForm()) return;

      // 这里可以添加API调用或事件触发
      console.log('提交请假申请:', this.leaveForm);
      alert('请假申请已提交');
    }
  }
}
</script>

样式设计

添加基础样式增强用户体验：

<style scoped>
.leave-request {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
}

.form-group {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
}

input, select, textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

button {
  background-color: #42b983;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>

扩展功能

日期计算：自动计算请假天数

vue实现请假条

computed: {
leaveDays() {
 if (!this.leaveForm.startDate || !this.leaveForm.endDate) return 0;
 const diff = new Date(this.leaveForm.endDate) - new Date(this.leaveForm.startDate);
 return Math.ceil(diff / (1000 * 60 * 60 * 24)) + 1;
}
}

历史记录：保存已提交的请假记录

data() {
return {
 leaveHistory: [],
 // ...其他数据
}
},
methods: {
submitLeaveRequest() {
 if (!this.validateForm()) return;
 this.leaveHistory.push({...this.leaveForm});
 this.resetForm();
},
resetForm() {
 this.leaveForm = {
   type: 'personal',
   startDate: '',
   endDate: '',
   reason: ''
 };
}
}