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

# 说明

[![](/upload/0/0/1IX45wQmJyTp.png)](/upload/0/0/1IX45wQmJyTp.png)

### 关键代码

```
<el-row>
	<el-col :span="12">
		<el-form-item label="姓名" prop="name">
			<el-input v-model="form_data.name" placeholder="姓名"></el-input>
		</el-form-item>
	</el-col>
	<el-col :span="12">
		<el-form-item label="性别">
			<el-radio v-model="form_data.gender" :label="0">女</el-radio>
			<el-radio v-model="form_data.gender" :label="1">男</el-radio>
		</el-form-item>
	</el-col>
</el-row>
```

### 完整代码

```

<el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" width="60%" @close="cureDialogClosed" :close-on-click-modal="false">
	<el-form ref="form" :model="form_data" label-width="120px" :rules="rules">
		<el-row>
		<el-col :span="12">
			<el-form-item label="姓名" prop="name">
				<el-input v-model="form_data.name" placeholder="姓名"></el-input>
			</el-form-item>
		</el-col>
		<el-col :span="12">
			<el-form-item label="性别">
				<el-radio v-model="form_data.gender" :label="0">女</el-radio>
				<el-radio v-model="form_data.gender" :label="1">男</el-radio>
			</el-form-item>
		</el-col>
	</el-row>
	<el-row>
		<el-col :span="12">
			<el-form-item label="身份证号" prop="idcard">
				<el-input v-model="form_data.idcard" placeholder="身份证号"></el-input>
			</el-form-item>
		</el-col>
		<el-col :span="12">
			<el-form-item label="年龄">
				<el-input-number v-model="form_data.age" :min="1" :max="120" label="年龄"></el-input-number>
			</el-form-item>
		</el-col>
	</el-row>
	<el-row>
		<el-col :span="12">
			<el-form-item label="电话号码" prop="phoneNum">
				<el-input v-model="form_data.phoneNum" placeholder="电话号码"></el-input>
			</el-form-item>
		</el-col>
		<el-col :span="12">
			<el-form-item label="接触来源">
				<el-input v-model="form_data.source" placeholder="感染来源"></el-input>
			</el-form-item>
		</el-col>
	</el-row>
	<el-row>
		<el-col :span="12">
			<el-form-item label="隔离地址">
				<el-input v-model="form_data.isolationAddr" placeholder="隔离地址"></el-input>
			</el-form-item>
		</el-col>
		<el-col :span="12">
			<el-form-item label="隔离开始时间">
				<el-date-picker type="date" placeholder="住院时间" v-model="form_data.isolationDate" value-format="yyyy-MM-dd" ></el-date-picker>
			</el-form-item>
		</el-col>
	</el-row>
	<el-row>
		<el-col :span="12">
			<el-form-item label="住址">
				<el-input v-model="form_data.address" placeholder="住址"></el-input>
			</el-form-item>
		</el-col>
	</el-row>
	</el-form>
	<div slot="footer" class="dialog-footer">
		<el-button @click="dialogFormVisible = false">取 消</el-button>
		<el-button type="primary" @click="ok">确 定</el-button>
	</div>
</el-dialog>
```

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