用vue组件写一个请假单的填写页面
时间: 2023-11-30 14:02:52 浏览: 43
好的,以下是一个简单的请假单填写页面的Vue组件示例代码,供您参考:
```html
<template>
<div>
<h2>填写请假单</h2>
<form>
<label>姓名:</label>
<input type="text" v-model="name" required />
<br />
<label>请假时间:</label>
<input type="datetime-local" v-model="time" required />
<br />
<label>请假类型:</label>
<select v-model="type" required>
<option value="">请选择</option>
<option value="病假">病假</option>
<option value="事假">事假</option>
<option value="年假">年假</option>
<option value="调休">调休</option>
<option value="其他">其他</option>
</select>
<br />
<label>请假原因:</label>
<textarea v-model="reason" required></textarea>
<br />
<button type="submit" @click.prevent="submitForm">提交</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
name: "",
time: "",
type: "",
reason: "",
};
},
methods: {
submitForm() {
// TODO: 根据实际需求提交请假单数据到后端
console.log("请假单已提交:", {
name: this.name,
time: this.time,
type: this.type,
reason: this.reason,
});
},
},
};
</script>
```
这个示例代码实现了一个简单的请假单填写页面,包括姓名、请假时间、请假类型和请假原因等字段,以及提交按钮。在提交按钮的点击事件中,您需要根据自己的实际需求将表单数据提交到后端进行处理,例如使用axios库发送POST请求等。同时,您可能还需要对表单数据进行验证和处理,例如验证姓名和请假原因是否符合要求、将时间格式转换为后端需要的格式等等。
希望这份代码能够对您有所帮助!