elementUI动态切换校验规则且切换校验规则时清空上一次校验产生的警告文字

需求：input有一个初始的校验规则，但初始的校验规则会根据别的下拉框的值的改变而改变。

input框:

<el-col :span="8"> <el-form-item label="中压侧额定电压(kV):" prop="transformerMVSRateVoltage" > <el-input v-model="transfomerInfo.transformerMVSRateVoltage" style="width: 75%" ></el-input> </el-form-item> </el-col>

select框

<el-col :span="8"> <el-form-item label="绕组数量:" prop="transformerWindingNum"> <el-select v-model="transfomerInfo.transformerWindingNum" clearable filterable style="width: 75%" placeholder="请选择绕组数量" @change="changenum" > <el-option label="2" value="2"></el-option> <el-option label="3" value="3"></el-option> </el-select> </el-form-item> </el-col>

初始化时input框的校验规则

rules: { transformerMVSRateVoltage: [ { required: true, message: '请填写中压侧额定电压', trigger: 'blur', } ] }

下拉框的值改变时调用方法改变input框校验规则

changenum(val) { if (val == 2) { //清除之前校验规则留下的警告文字 this.$refs.transformerForm.clearValidate(['transformerMVSRateVoltage']) //添加新的校验规则 this.rules.transformerMVSRateVoltage[0] = { required: false, message: '请填写中压侧额定电压', trigger: 'blur', } } else { this.rules.transformerMVSRateVoltage[0] = { required: true, message: '请填写中压侧额定电压', trigger: 'blur', } } },