【Element Ui】 vue3中修改el-form的rules后不触发自动校验,再次修改rules时清除验证信息
修改el-form的rules后不触发自动校验,再次修改rules时清除验证信息
项目要求：类型为“业务备货”的时候，“客户”为必填项
效果如下：
代码如下：
<!-- :validate-on-rule-change="false" 是为了阻止更改rules时立即触发校验-->
<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="采购备货"></el-radio-button>
<el-radio-button value="2" label="业务备货"></el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="客户" prop="custnm">
<el-input v-model="form.custnm" placeholder="请输入客户"></el-input>
</el-form-item>
</el-form>
......
// 初始化设置
const formrules = ref({
type: [
{
required: true,
message: '请选择类型',
trigger: 'change',
},
]
});
// 切换类型时
function needcustnm(){
if(form.value.type == '2'){
formrules.value = {
type: [
{
required: true,
message: '请选择类型',
trigger: 'change',
},
],
custnm:[
{
required: true,
message: '请输入客户',
trigger: 'change',
},
]
}
}else{
formrules.value = {
type: [
{
required: true,
message: '请选择类型',
trigger: 'change',
},
]
}
// 需要加nexttick,不然获取不到
nexttick(()=>{
// 清除校验效果
proxy.$refs["orderform"] && proxy.$refs["orderform"].clearvalidate()
})
}
}
重点：
:validate-on-rule-change="false" 是为了阻止更改rules时立即触发校验
nexttick(()=>{
// 清除校验效果
proxy.$refs["orderform"] && proxy.$refs["orderform"].clearvalidate()
})
相关文章:
-
-
此时就可以了，filter函数筛选类型时 要返回一个类型谓词；要不然ts是不知道你缩减了类型的；关键字，它被称为类型谓词，用来判断一个变量属于某个接口或类型。当我要帅选出所有A类型…
-
-
app.directive('lazy'，{ // app.directive('指令名‘，配置对象).......})泛型是可以在保证类型安全前提下，让函数等与多种类型一起工作，…
-
-
版权声明：本文内容由互联网用户贡献，该文观点仅代表作者本人。本站仅提供信息存储服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 2386932994@qq.com 举报，一经查实将立刻删除。
我要评论
发表评论