业务中经常会遇到多行多列展示的表单需求,所以我们会搭配着栅格组件来实现。利用栅格化布局 span
超过 24
会自动折行的功能。
<el-form ref="form" :model="form" label-width="auto">
<el-row :gutter="10">
<el-col :span="12">
<el-form-item label="字段A">
<el-input v-model="form.a" placeholder="请输入"></el-input>
</el-form-item>
</el-col>
<el-col :span='12'>
<el-form-item label="字段B">
<el-input v-model="form.b" placeholder="请输入"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
如果这样组合使用的同学,肯定会遇到过表单项错位的问题。因为 Element UI
是栅格组件默认是使用的 float
布局的,所以如果你的 <el-form-item>
元素高度不一致的话,就会出现下边截图中布局错位的问题。
字段C项并没有正确出现在字段A项的正下方,而是错开一列出现在了字段B的下方。