### Vue3 中 `el-form` 被禁用时单个 `el-radio-group` 或元素解除禁用的解决方案 在 Vue3 的 Element Plus 库中，当父级 `<el-form>` 设置了 `disabled=true` 时，默认情况下其内部所有的子组件都会继承这一状态而被禁用。然而，有时我们希望某些特定的子组件（如 `<el-radio-group>` 或其他单独的控件）能够保持启用状态。 以下是实现此需求的具体方法： #### 使用 scopedSlots 和动态绑定解决 可以通过为需要解除禁用的子组件显式设置 `:disabled="false"` 来覆盖父级的禁用行为。由于父级的 `disabled` 是全局作用于所有子组件的，因此需要通过更细粒度的方式控制具体组件的状态。 以下是一个完整的示例代码片段： ```vue <template> <el-form :model="form" :rules="rules" ref="ruleFormRef" :disabled="true"> <!-- 父表单整体禁用 --> <el-form-item label="用户名" prop="username"> <el-input v-model="form.username"></el-input> <!-- 默认受父级影响 --> </el-form-item> <!-- 单独启用的 radio group --> <el-form-item label="性别" prop="gender"> <el-radio-group v-model="form.gender" :disabled="false"> <!-- 显式设置不受父级影响 --> <el-radio :label="1">男</el-radio> <el-radio :label="2">女</el-radio> </el-radio-group> </el-form-item> <!-- 另一单独启用的 input --> <el-form-item label="备注" prop="remark"> <el-input v-model="form.remark" :disabled="false"></el-input> <!-- 同样显式设置不受父级影响 --> </el-form-item> </el-form> </template> <script> import { reactive, ref } from "vue"; export default { setup() { const ruleFormRef = ref(null); const form = reactive({ username: "", gender: null, remark: "", }); const rules = { username: [{ required: true, message: "请输入用户名", trigger: "blur" }], gender: [{ required: true, message: "请选择性别", trigger: "change" }], remark: [{ max: 50, message: "备注长度不得超过50字", trigger: "blur" }], }; return { form, rules, ruleFormRef, }; }, }; </script> ``` 在这个例子中，尽管 `<el-form>` 整体设置了 `:disabled="true"`，但是 `<el-radio-group>` 和另一个 `<el-input>` 都通过显式的 `:disabled="false"` 实现了解除禁用的效果[^1]。 --- #### 动态计算禁用逻辑 如果需要更加灵活地控制哪些子组件可以解除禁用，可以在数据模型中定义一个布尔类型的标志位来决定具体的禁用状态。例如： ```vue <el-radio-group v-model="form.gender" :disabled="!enableGenderRadio"> <el-radio :label="1">男</el-radio> <el-radio :label="2">女</el-radio> </el-radio-group> ``` 其中，`enableGenderRadio` 是一个响应式变量，可以根据业务逻辑动态调整其值。 --- #### 注意事项 1. **优先级问题** 子组件的 `disabled` 属性具有更高的优先级，即使父级 `<el-form>` 已经设置了禁用状态，只要子组件明确指定了 `:disabled="false"`，它仍然会保持可用状态[^3]。 2. **样式冲突** 如果发现视觉效果不符合预期，可能是因为 CSS 样式层面上存在干扰。此时应检查是否有额外的类名或样式规则强制应用了禁用样式。 3. **校验规则的影响** 当某个子组件被单独启用时，仍需确保它的校验规则正常工作。可通过手动触发 `validateField` 方法测试单一字段的有效性[^3]。 --- ### 总结 通过为需要解除禁用的子组件显式指定 `:disabled="false"`，即可实现在父级 `<el-form>` 被禁用的情况下保留部分子组件的功能性。这种方法简单有效，适用于大多数场景。 ---