elementui中根据单选按钮决定from表单提交的内容

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

问题:在使用一个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版权协议,转载请附上原文出处链接和本声明。