el-form两列并排
时间: 2023-10-06 16:05:33 浏览: 150
要将 `el-form` 的表单项分为两列并排,你可以使用 Grid System 或 Flexbox 来实现。以下是两种方法的示例。
使用 Grid System:
```html
<template>
<el-form>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="字段1">
<!-- 表单项1 -->
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="字段2">
<!-- 表单项2 -->
</el-form-item>
</el-col>
</el-row>
</el-form>
</template>
```
使用 Flexbox:
```html
<template>
<el-form style="display: flex;">
<div style="flex: 1;">
<el-form-item label="字段1">
<!-- 表单项1 -->
</el-form-item>
</div>
<div style="flex: 1;">
<el-form-item label="字段2">
<!-- 表单项2 -->
</el-form-item>
</div>
</el-form>
</template>
```
以上示例中,你可以将 "字段1" 和 "字段2" 替换为你实际的表单字段,并在 `<!-- 表单项 -->` 处插入对应的表单项组件或代码。
阅读全文