效果图:选择不同的礼包类型,通用情况下需要填写礼包码,唯一情况下需要上传文件


问题:在使用一个form数据的情况下,注意礼包码和上传礼包两个字段都是必填的,怎去处理当选择一个类型添加时候,那个多余字段的校验呢
html中,使用的v-show来控制显示和隐藏项。为什么不用v-if捏,这也是试错试出来的。v-if对元素的控制显示给内部ruleForm.xxx赋值,这个赋值的含义会让表单执行清空方法clearValidate时候产生错误,他会觉得每次使用v-if切换之后付的值就是初始化,所以在你离开表单的时候执行清空,返回回来还存在上次的数据。遇到这种情况也可以选择用v-if,可以选择该字段赋值=“ ”这个鸭子,前提是在不同类型切换下改变的字段少。
<el-form-item label="礼包码类型" prop="type" class="reduce_bottom">
<el-radio-group v-model="ruleForm.type" @change="typeChange">
<el-radio :label="0">通用码</el-radio>
<el-radio :label="1">唯一码</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item v-show="ruleForm.type==0" label="礼包码" prop="code" size="mini">
<el-input
v-model="ruleForm.code"
clearable
placeholder="请输入礼包码,最多不能超过20位"
style="width: 280px"
></el-input>
</el-form-item>
<el-form-item v-show="ruleForm.type==1" label="上传礼包" prop="CodeDetail" size="mini" >
<el-upload action="" :auto-upload="false" accept=".xls,.xlsx,xlsm" :on-change="handleChange" :show-file-list="false">
<el-input placeholder="请选择excle文件" v-model="ruleForm.CodeDetail.name" c style="width: 280px"/>
</el-upload>
</el-form-item>js切换方法中做的处理,改变校验数据内容,切换了上上一个类型控制的字段的校验错误清除掉,产品给的需求就是,不希望切来切去的时候看见上一次填写出现的校验问题,那就去掉,也咩关系,在提交时候validate还是会根据现有的rules数据再次进行校验的
// 类型切换
typeChange(value){
// 根据设置礼包码和上传文件哪个是必须的
if(value==0){
this.$set(this.rules,'code',[
{
required: true,
message: '请填写礼包码',
trigger: 'blur'
},
{ min:1, max: 20, message: '限制输入1-20字符', trigger: 'blur' }
])
this.$refs.ruleForm.clearValidate('CodeDetail')
this.$refs.ruleForm.clearValidate('code')
this.rules.CodeDetail=[]
}else if(value==1&&!this.editId){
this.$set(this.rules,'CodeDetail',[
{
required: true,
message: '请选择文件',
trigger: 'blur'
}
])
this.$refs.ruleForm.clearValidate('code')
this.$refs.ruleForm.clearValidate('CodeDetail')
this.rules.code=[]
}else if(value==1&&this.editId){
this.$refs.ruleForm.clearValidate('code')
this.$refs.ruleForm.clearValidate('CodeDetail')
this.rules.code=[]
}
}, 
这块问题其实已经遇到了三次了,之前没有总结,几乎是每一次都需要扒一下之前的代码才能想起来是怎么搞定的。
版权声明:本文为qq_43468165原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。