項(xiàng)目要求：類型為“業(yè)務(wù)備貨”的時(shí)候，“客戶”為必填項(xiàng)
效果如下：
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-848825.html
代碼如下：
<!-- :validate-on-rule-change="false" 是為了阻止更改rules時(shí)立即觸發(fā)校驗(yàn)-->
<el-form :model="form" ref="orderForm" :rules="formRules" :validate-on-rule-change="false">
<el-form-item label="類型" prop="type">
<el-radio-group v-model="form.type" @change="needCustNm">
<el-radio-button value="1" label="采購(gòu)備貨"></el-radio-button>
<el-radio-button value="2" label="業(yè)務(wù)備貨"></el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="客戶" prop="custNm">
<el-input v-model="form.custNm" placeholder="請(qǐng)輸入客戶"></el-input>
</el-form-item>
</el-form>
......
// 初始化設(shè)置
const formRules = ref({
type: [
{
required: true,
message: '請(qǐng)選擇類型',
trigger: 'change',
},
]
});
// 切換類型時(shí)
function needCustNm(){
if(form.value.type == '2'){
formRules.value = {
type: [
{
required: true,
message: '請(qǐng)選擇類型',
trigger: 'change',
},
],
custNm:[
{
required: true,
message: '請(qǐng)輸入客戶',
trigger: 'change',
},
]
}
}else{
formRules.value = {
type: [
{
required: true,
message: '請(qǐng)選擇類型',
trigger: 'change',
},
]
}
// 需要加nextTick,不然獲取不到
nextTick(()=>{
// 清除校驗(yàn)效果
proxy.$refs["orderForm"] && proxy.$refs["orderForm"].clearValidate()
})
}
}重點(diǎn)：
:validate-on-rule-change="false" 是為了阻止更改rules時(shí)立即觸發(fā)校驗(yàn)nextTick(()=>{
// 清除校驗(yàn)效果
proxy.$refs["orderForm"] && proxy.$refs["orderForm"].clearValidate()
})文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-848825.html
到了這里，關(guān)于【Element Ui】 vue3中修改el-form的rules后不觸發(fā)自動(dòng)校驗(yàn),再次修改rules時(shí)清除驗(yàn)證信息的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
