el-form-item换行
时间: 2023-11-05 13:20:51 浏览: 346
要在 `el-form-item` 中实现换行,你可以使用 `el-col` 来将表单项放入不同的列中。这样可以控制每个表单项在不同屏幕尺寸下的布局,并且可以自动换行。
以下是一个示例代码:
```html
<el-form>
<el-row>
<el-col :xs="24" :sm="12">
<el-form-item label="姓名">
<!-- 表单项内容 -->
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12">
<el-form-item label="年龄">
<!-- 表单项内容 -->
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :xs="24" :sm="12">
<el-form-item label="性别">
<!-- 表单项内容 -->
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12">
<el-form-item label="手机号">
<!-- 表单项内容 -->
</el-form-item>
</el-col>
</el-row>
</el-form>
```
在上面的代码中,我们使用了 `el-row` 和 `el-col` 来创建两行两列的布局。每个 `el-col` 元素都包含一个 `el-form-item`,你可以根据需要添加更多的行和列。
这样,在较小的屏幕尺寸下(如手机),表单项将自动换行显示,而在较大的屏幕尺寸下(如电脑),它们将按列布局显示。
阅读全文