element ui 表单两列
时间: 2023-10-08 20:05:04 浏览: 102
要在 Element UI 中实现表单的两列布局,可以使用栅格系统。以下是一个示例代码:
```html
<el-form>
<el-row>
<el-col :span="12">
<el-form-item label="字段1">
<!-- 第一列的表单控件放在这里 -->
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="字段2">
<!-- 第二列的表单控件放在这里 -->
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item>
<!-- 按钮等操作放在这里 -->
</el-form-item>
</el-col>
</el-row>
</el-form>
```
在这个例子中,使用了 `el-row` 和 `el-col` 组件来创建两列布局。每个 `el-col` 组件都具有 `:span="12"` 属性,表示它占据了父容器宽度的一半。
你可以在每个 `el-form-item` 中放置相应的表单控件,如 `input`、`select`、`checkbox` 等。按钮或其他操作也可以放在最后一个 `el-col` 中。
通过这种方式,你可以将表单元素分为两列,并在不同列中放置不同的控件。
阅读全文