element-ui el-form-item设置一行一个或者多个表单
时间: 2023-08-14 16:04:38 浏览: 1378
element-ui中的el-form-item可以设置一行一个或者多个表单,具体的方式是通过设置el-form-item的prop属性来控制表单的布局,例如:
一行一个表单:
```html
<el-form>
<el-form-item label="姓名" prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input v-model="form.age"></el-input>
</el-form-item>
</el-form>
```
一行多个表单:
```html
<el-form>
<el-row>
<el-col :span="12">
<el-form-item label="姓名" prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="年龄" prop="age">
<el-input v-model="form.age"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
```
在第二个例子中,通过el-row和el-col来控制表单的布局,el-col的span属性控制列的宽度,这里将一行分成了两列,每列占据一半的宽度。