### 调用 `$refs.form.resetFields` 后输入框无法输入文字的原因 当调用 `this.$refs[formName].resetFields()` 方法时，如果某些字段被设置为只读 (`disabled`) 或者存在未正确初始化的状态，则可能导致这些字段失去交互能力[^2]。具体来说： - 如果表单项在 DOM 渲染完成前进行了赋值操作，而此时调用了 `resetFields()`，则可能会导致部分状态不一致，从而引发不可预期的行为。 - 需要确保所有的表单字段都已正确定义了 `prop` 属性，并且遵循 Vue 的响应式机制。 #### 解决方案 以下是几种可能的解决方案来修复此问题： 1. **延迟重置逻辑** 使用 `this.$nextTick` 来确保 DOM 已完全渲染后再执行 `resetFields()` 操作。这可以有效避免因 DOM 尚未加载完毕而导致的问题。 ```javascript this.$nextTick(() => { this.$refs['form'].resetFields(); }); ``` 2. **移除只读属性 (Disabled)** 若某些字段设置了 `disabled` 属性，在调用 `resetFields()` 前需先解除其禁用状态，然后再重新启用它。这样能够防止由于字段锁定引起的异常行为[^3]。 ```javascript Object.keys(this.ruleForm).forEach(key => { if (typeof this.ruleForm[key] === 'boolean') { // 判断是否为布尔型字段 this.$set(this.ruleForm, key, false); } else { this.$set(this.ruleForm, key, ''); } }); this.$nextTick(() => { this.$refs['form'].resetFields(); // 重新应用 disabled 状态 setTimeout(() => { this.disabledField = true; }, 0); }); ``` 3. **手动清空并恢复初始值** 对于那些不需要标记为必填项但仍希望保留默认值的情况，可以通过手动方式清理数据结构中的内容而不是依赖框架自带的方法。 ```javascript const initialData = JSON.parse(JSON.stringify(this.initialRuleForm)); this.ruleForm = {...initialData}; this.$nextTick(() => { this.$refs['form'] && this.$refs['form'].clearValidate(); // 可选：清除验证错误提示 }); ``` 4. **处理重复编辑冲突** 当多次连续触发相同实例下的编辑动作时，可能存在旧有数据残留干扰新请求的现象[^4]。为此建议每次切换目标对象之前彻底销毁当前关联资源或者采用独立组件封装每条记录对应的 UI 表现形式。 --- ### 示例代码片段 以下是一个综合上述策略实现的例子： ```html <template> <el-dialog :visible.sync="dialogVisible"> <el-form ref="form" :model="ruleForm" :rules="rules"> <!-- 动态绑定 prop --> <el-form-item label="名称" prop="name"> <el-input v-model="ruleForm.name"></el-input> </el-form-item> <el-form-item label="编号" prop="num"> <el-input v-model="ruleForm.num" :disabled="isNumLocked"></el-input> </el-form-item> <button @click.prevent="handleReset">重置</button> </el-form> </el-dialog> </template> <script> export default { data() { return { dialogVisible: false, isNumLocked: true, ruleForm: {}, rules: {}, // 定义校验规则... initialRuleForm: {} }; }, methods: { handleReset() { this.isNumLocked = false; this.$nextTick(() => { this.$refs['form'].resetFields(); // 还原至原始状态 this.ruleForm = JSON.parse(JSON.stringify(this.initialRuleForm)); this.$nextTick(() => { this.isNumLocked = true; // 锁定特定字段 }); }); } } } </script> ``` --- ###