1.使用v-show 或 v-if动态切换校验select
blog.csdn.net/ztx114/arti… ---- 引用
描述问题：
select学生类别，根据类别展示相应的内容，直接点击保存按钮，此时出现校验信息，如下图所示：
a.当使用v-show时，校验规则能消失，但表单提交校验不通过
b.当使用v-if时，表单校验通过，但是校验规则会保留上一次的校验记录
解决方案： v-show与isUg结合处理
PS: isUg，isGra均是boolean类型变量
<FormItem v-show="isUg" label="本专科生专业" prop="ugMajorCode"
:rules="{required: isGra ? false : true, message: '本专科生专业不能为空', trigger: 'change'}">
<Select v-model="addForm.ugMajorCode"></Select>
</FormItem>
2.FormItem同时校验TimePicker与multiple属性的select
描述问题：
select是multiple类型，校验时未设置类型为Array,一直校验不通过，而且select与TimePicker再一个FormItem中，需要同时校验,调用validator方法处理
解决方案： 指定type:"Array"，结合validator处理
<FormItem label="执行时间" prop="schoolPolicyWeek">
<Select v-model="addForm.schoolPolicyWeek" multiple> </Select>
<TimePicker type="time" :value="addForm.schoolPolicyWeekDay" @on-change="ev => (addForm.schoolPolicyWeekDay = ev)"></TimePicker>
<FormItem>
//校验规则
validateRule(){
const ruleWeek = (rule, value, callback) => {
if (!this.addForm.schoolPolicyWeekDay) { //第二个校验属性
callback("请选择");
return;
}
callback();
};
return {
schoolPolicyWeek: [
{
required: true,
type: "array",
message: "请选择",
trigger: "change"
},
{
validator: ruleWeek
}
]
}
}
3.FormItem校验Cascader
描述问题：
直接点击保存，出现校验信息，此时选内容，问题来了，校验信息不消失，再次切换内容，校验信息才消失
解决方案： 指定事件类型，trigger:blur，结合validator处理
<FormItem label="目标表" prop="tenantSelectData">
<Cascader v-model="tenantSelectData" :data="tenantData"transfer @on-change="handleChange"></Cascader>
</FormItem>
//校验规则
validateRule(){
const ruleTenant = (rule, value, callback) => {
console.log(this.tenantSelectData.length);
if (this.tenantSelectData.length === 0) {
callback("请选择");
return;
}
callback();
};
return {
tenantSelectData: [
{
required: true,
message: "请选择",
trigger: "blur" //校验类型为blur ，若为change，第一次失效
},
{
validator: ruleTenant
}
],
}
}
4.总结：
以上是做项目时遇到的小问题，记录一下~~，若有问题，在此，小燕子欢迎小伙伴来纠正哈，呼啦哗啦~，end，咦，还有午休时间哇，enjoy time@~,byebye,若可以的话，记得star一下哈
