el-form中el-form-item有两种,一种是独占一行,一种是一行有多个
时间: 2024-01-17 14:52:02 浏览: 718
element中el-container容器与div布局区分详解
是的,`el-form-item` 有两种布局方式:独占一行和一行多个。默认情况下,`el-form-item` 独占一行,即每个 `el-form-item` 占据一个完整的行。而如果给 `el-form` 设置了 `inline` 属性后,`el-form-item` 就会变成一行多个,即每个 `el-form-item` 在同一行内并排显示,直到一行放不下才会自动换行。可以通过给 `el-form-item` 设置 `prop` 属性来控制表单项的排列顺序。例如:
```html
<el-form :inline="true">
<el-form-item label="用户名" prop="username">
<el-input v-model="username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">登录</el-button>
</el-form-item>
</el-form>
```
上面的代码中,前两个 `el-form-item` 是独占一行的表单项,最后一个 `el-form-item` 是一行多个的表单项,它包含一个登录按钮。其中,`prop` 属性用来指定表单项的属性名,以便在提交表单时使用。
阅读全文