el-form prop和lable 对齐方式
时间: 2024-01-17 12:06:15 浏览: 123
el-table,el-form在vue中封装组件化,含操作按钮和插槽.pdf
5星 · 资源好评率100%
可以通过设置 `label-width` 属性来实现 `label` 和 `prop` 对齐方式。
例如:
```html
<el-form :model="form" label-width="100px">
<el-form-item label="用户名" prop="username">
<el-input v-model="form.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="form.password"></el-input>
</el-form-item>
</el-form>
```
在上面的例子中,`label-width` 属性被设置为 `100px`,因此所有的 `label` 的宽度都会被设置为 `100px`。这样,`label` 和 `prop` 就可以对齐了。
如果你希望所有的 `label` 都有相同的宽度,可以设置一个全局的样式:
```css
.el-form-item__label {
width: 100px;
}
```
这样所有的 `label` 都会有 `100px` 的宽度。
阅读全文