需求:input有一个初始的校验规则,但初始的校验规则会根据别的下拉框的值的改变而改变。
input框:
<el-form
:model="transfomerInfo"
:rules="rules"
ref="transformerForm"
label-width="170px"
>
<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>
</el-form>
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',
}
}
},