设计一个vue3的el-form-item两列四行的布局,并且label右对齐
时间: 2023-11-27 10:53:37 浏览: 353
两端对齐label
5星 · 资源好评率100%
可以使用`el-row`和`el-col`来实现两列四行的布局,同时使用`label-position`将label右对齐。
示例代码如下:
```html
<el-row>
<el-col :span="6">
<el-form-item label="姓名:" label-position="right">
<el-input></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="性别:" label-position="right">
<el-radio-group>
<el-radio label="male">男</el-radio>
<el-radio label="female">女</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="年龄:" label-position="right">
<el-input></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="职业:" label-position="right">
<el-select>
<el-option label="学生" value="student"></el-option>
<el-option label="工人" value="worker"></el-option>
<el-option label="教师" value="teacher"></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
```
在代码中,我们首先使用`el-row`来创建一行,然后使用`el-col`创建每一列,每个`el-col`设置了`span`属性,表示该列占据的栅格数。这里我们设置每个`el-col`占用6个栅格,因此整个表单可以分为两列。
在每个`el-form-item`中,我们使用`label-position`将label设置为右对齐。这样,每个表单项的label都会在右边,而表单项本身则在左边。
阅读全文