el-form中的label-width属性的使用
时间: 2023-11-22 15:53:55 浏览: 81
`label-width` 属性是用于设置 `el-form-item` 组件中 `label` 标签的宽度的属性。
语法如下:
```html
<el-form :model="form" label-width="80px">
<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 type="password" v-model="form.password"></el-input>
</el-form-item>
</el-form>
```
在上面的例子中,我们使用 `label-width` 属性将所有 `el-form-item` 组件的 `label` 标签的宽度设置为 `80px`。
如果你想针对某个 `el-form-item` 组件单独设置 `label` 标签的宽度,可以使用 `label-width` 属性的另一种写法:
```html
<el-form :model="form">
<el-form-item label="用户名" prop="username" :label-width="80">
<el-input v-model="form.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="form.password"></el-input>
</el-form-item>
</el-form>
```
在上面的例子中,我们使用 `:label-width` 属性将第一个 `el-form-item` 组件的 `label` 标签的宽度设置为 `80`。注意,这里的 `:label-width` 是一个绑定值,可以动态设置宽度。
阅读全文