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算法没检测到修改，没有渲染等导致。所以直接强制更新，搞定。