背景：

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算法沒檢測到修改，沒有渲染等導致。所以直接強制更新，搞定。