vue element ui - form表单布局-马育民老师

# 说明

实现下面效果

[![](https://www.malaoshi.top/upload/pic/vue/element_ui/Snipaste_2022-03-02_16-19-47.png)](https://www.malaoshi.top/upload/pic/vue/element_ui/Snipaste_2022-03-02_16-19-47.png)

# 代码

```
<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>
```

原文出处：http://malaoshi.top/show_1IX2sBdk1sZc.html