vue,elementui下拉框el-autocomplete驗證狀態切換

需求：故障部件只有在案件狀態為2時才是必填項，這時候驗證的方法就需要一定條件下添加，這里前面只需要控制:required="ifWriteFaultPart"就可以了，

<el-form-item label="故障部件" label-width="120px" ref="faultPart" prop="faultPart" :required="ifWriteFaultPart">
    <el-autocomplete
    v-model="form.faultPart"
    :fetch-suggestions="querySearchfaultPart"
    placeholder="請輸入內容"
    clearable
    ></el-autocomplete>
</el-form-item>
data(){
    let validateFaultPart = (rule, value, callback) => {
      if(this.ifWriteFaultPart) {
        if(value){
          callback()
        }else {
          callback(new Error("請輸入故障部件"))
        }
      }else{
        callback()
      }
    }
    return {
        rules: {
            faultPart: [{validator: validateFaultPart}],
        }
    }
},
computed: {
  ifWriteFaultPart(){
    return this.form.eventStatus === '2'
    //當案件狀態為2的時候，故障部件需要校驗，是必填項
  }
},

 

但是在切換案件狀態后，驗證消息沒有消失，這是因為，elementui的驗證在加載頁面的時候已經加載過來，所以，切換案件狀態后之前的驗證消息不會消失。這里就需要在案件狀態里面加change方法，來手動移除校驗結果

<el-form-item label="案件狀態" label-width="120px" ref="eventStatus">
  <el-select v-model="form.eventStatus" placeholder="請選擇案件狀態" @change="handSwitch">
    <el-option
    v-for="item in options1"
    :key="item.value"
    :label="item.label"
    :value="item.value">
    </el-option>
  </el-select>
</el-form-item>
methods: {
  handSwitch(){
    this.getRefs(['faultPart', 'eventStatus'])
  },
  getRefs (data) {
    data.map(item => {
      this.$refs[item].clearValidate() // 移除校驗結果
    })
  },
}