elementui disable
禁用 Element UI 组件的方法
禁用表单组件
在表单输入类组件（如 el-input、el-select）上设置 disabled 属性为 true，可禁用交互：
<el-input v-model="inputValue" disabled></el-input>
<el-select v-model="selectValue" disabled>
<el-option label="选项1" value="1"></el-option>
</el-select>禁用按钮组件
通过 disabled 属性控制按钮状态，支持动态绑定：
<el-button :disabled="isDisabled">提交</el-button>data() {
return {
isDisabled: true // 根据条件动态设置
}
}禁用表格行或列
在 el-table 中，可通过 row-class-name 或条件渲染禁用特定行：
<el-table :data="tableData" :row-class-name="setDisabledRow">
<el-table-column prop="name" label="名称"></el-table-column>
</el-table>methods: {
setDisabledRow({ row }) {
return row.disabled ? 'disabled-row' : '';
}
}通过 CSS 控制样式：
.disabled-row {
opacity: 0.6;
pointer-events: none;
}禁用日期选择器
el-date-picker 的禁用状态可通过 disabled 属性或指定禁用日期范围实现：
<el-date-picker v-model="date" :disabled="true"></el-date-picker>
<!-- 禁用特定日期 -->
<el-date-picker
v-model="date"
:picker-options="pickerOptions">
</el-date-picker>data() {
return {
pickerOptions: {
disabledDate(time) {
return time.getTime() < Date.now(); // 禁用今天之前的日期
}
}
}
}禁用菜单项
在 el-menu 中，通过 disabled 属性禁用单个菜单项：
<el-menu-item index="1" disabled>不可选菜单</el-menu-item>注意事项
- 动态绑定时需确保
disabled值为布尔类型。 - 禁用状态仅阻止交互，需结合样式（如
opacity）增强视觉提示。 - 部分组件（如
el-checkbox、el-radio）的禁用逻辑与上述类似。
