说明

实现下面效果

代码

<template>
    <div>
        <h1>请假</h1>
        <el-form ref="form" label-width="80px">
            <el-form-item label="请假类型">
                <el-select v-model="type" placeholder="请选择">
                <el-option :label="item.text" :value="item.id" v-for="item in type_datas" :key="item.id" ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="开始日期">
                <el-col :span="4">
                <el-date-picker type="date" placeholder="选择日期" v-model="start_date" style="width: 100%;"></el-date-picker>
                </el-col>
            </el-form-item>
            <el-form-item label="结束日期">
                <el-col :span="4">
                <el-date-picker type="date" placeholder="选择日期" v-model="end_date" style="width: 100%;"></el-date-picker>
                </el-col>
            </el-form-item>
            <el-form-item label="请假事由">
                <el-col :span="8">
                <el-input type="textarea" v-model="reason" rows="4"></el-input>
                </el-col>
            </el-form-item>
            <el-form-item label="请假人">
                {{leave_name}}
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="doSubmit">提交</el-button>
                <el-button>取消</el-button>
                <div style="color:red;">{{msg}}</div>
            </el-form-item>
            </el-form>

    </div>
</template>

<script>

export default {
    data: function(){

        return { //是vue的配置，表示数据
            reason:"", // 设置表单控件的默认值
            type:"", // 设置表单控件的默认值
            start_date:"", // 设置表单控件的默认值
            end_date:"", // 设置表单控件的默认值
            leave_name:"", // 请假人
            type_datas:[
                    {id:"1",text:"事假"},
                    {id:"2",text:"病假"},
                    {id:"3",text:"产假"},
                    {id:"4",text:"婚假"}
                ],
            msg:"",
        }
    }
}
</script>

原文出处：/show_1IX2sBdk1sZc.html