el-form 多行多列
时间: 2023-06-23 18:51:37 浏览: 1253
基于elementui的form表单实现的一个高拓展性的表格布局组件
要在 el-form 中实现多行多列布局,可以使用 el-row 和 el-col 标签来实现。例如,可以这样写:
```
<el-form>
<el-row>
<el-col :span="8">
<el-form-item label="姓名">
<el-input></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="年龄">
<el-input></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="性别">
<el-radio-group>
<el-radio label="male">男</el-radio>
<el-radio label="female">女</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="地址">
<el-input></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="邮箱">
<el-input></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
```
这样就可以实现一个有两行三列的表单布局,其中第一行有三列,第二行有两列。可以根据实际需求调整 el-col 的 span 属性来控制每个表单项的宽度。
阅读全文