element-ui中lable文字禁用
时间: 2023-09-08 15:10:49 浏览: 87
element-ui 关于获取select 的label值方法
5星 · 资源好评率100%
在 ElementUI 中,可以通过设置 `el-form-item` 组件的 `disabled` 属性来禁用表单项的文字。禁用后,表单项的文字将变为灰色,同时无法被选中。
具体步骤如下:
1. 在 `el-form` 组件中使用 `el-form-item` 组件包裹需要禁用文字的表单项,同时设置 `disabled` 属性。
```html
<el-form>
<el-form-item label="表单项1" :disabled="true">
<el-input></el-input>
</el-form-item>
<el-form-item label="表单项2">
<el-input></el-input>
</el-form-item>
</el-form>
```
2. 在 CSS 中设置 `.is-disabled .el-form-item__label` 类的样式,以改变禁用表单项的文字颜色。
```css
.is-disabled .el-form-item__label {
color: #c0c4cc;
}
```
这样就可以禁用 ElementUI 中表单项的文字了。完整代码如下:
```html
<template>
<el-form>
<el-form-item label="表单项1" :disabled="true">
<el-input></el-input>
</el-form-item>
<el-form-item label="表单项2">
<el-input></el-input>
</el-form-item>
</el-form>
</template>
<style>
.is-disabled .el-form-item__label {
color: #c0c4cc;
}
</style>
```
阅读全文