el-form排列整齐
时间: 2023-09-13 12:03:16 浏览: 152
要使 el-form 中的表单元素排列整齐,可以使用 el-col 和 el-row 进行布局。el-row 用于创建一个行容器,el-col 用于创建列容器。你可以在 el-form 中的每个表单元素外部包裹一个 el-row,然后在 el-row 中使用 el-col 来控制每个表单元素所占的列数。
下面是一个示例代码,展示如何使用 el-row 和 el-col 来排列 el-form 中的表单元素:
```html
<el-form>
<el-row>
<el-col :span="8">
<el-form-item label="字段1">
<el-input></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="字段2">
<el-input></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="字段3">
<el-input></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
```
在上面的示例中,每个 el-col 的 span 属性设置为 8,表示每个表单元素占据整个行的 1/3。你可以根据需要调整 span 的值来控制每个表单元素所占的列数,从而实现整齐的排列效果。
阅读全文