input+disabled/readonly问题

背景：

vue2+elementui

<el-input v-model="inputForm.projectName" class="input-font" :disabled="projectDisabled" placeholder="请选择"   :readonly="isReadonly"><el-button  slot="append"  @click="showChooseProject" icon="el-icon-search"></el-button>
</el-input>

<input>元素设置了disabled和readonly属性，再点击按钮修改inputForm.projectName字段后，校验出错，以及input显示值不更新的问题。

解决方法

校验出错-自定义验证逻辑

原因分析：

表单字段被 readonly 或 disabled，可能影响验证触发；

验证触发的时机和值更新的时机有先后，导致校验出错；

解决办法：

自定义验证逻辑，代码如下：

<el-form-item label="项目" prop="projectName" :rules="[{ required: true, validator: validateProjectName, trigger: ['blur','change']  }, ]"><el-input v-model="inputForm.projectName" class="input-font" :disabled="projectDisabled" placeholder="请选择"   readonly><el-button  slot="append" :disabled="disabled" @click="showChooseProject" icon="el-icon-search"></el-button></el-input>
</el-form-item>

// 自定义验证逻辑validateProjectName  (rule, value, callback)  {// 判断值是否为空if (!this.inputForm.projectName) {callback(new Error('项目不能为空'));}  else {callback();  // 验证通过}},

validateProjectName 函数中获取value的时机和修改时机有先后，所以验证结果不准确，所以直接把验证inputForm.projectName即可√

input显示值不更新 - 手动触发更新

this.inputForm.projectName = name;
this.$forceUpdate();

由于设置了disable | readonly属性，回显失败。猜测是diff算法没检测到修改，没有渲染等导致。所以直接强制更新，搞定。