1 简介

　　页面两个输入框如下，客户渠道必填，渠道详情在客户渠道的值为8，14，17的时候必填，其它非必填

　　image

　　form表单

<el-form label-width="125px" :model="form" :rules="rulesForm" ref="form">
    <el-col :span="12" >
              <el-form-item label="客户渠道" prop="channel">
                <el-select v-model="form.channel" style="width:90%" clearable @change="toArea">
                  <el-option v-for="item in channelRole" :key="item.id" :label="item.dictname" :value="item.dictvalue"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="detailF == 1">
              <el-form-item label="渠道详情" prop="area">
                <el-input v-model="form.area" style="width:90%"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-else-if="detailF == 2" >
              <el-form-item label="渠道详情" prop="area" >
                <el-input v-model="form.area" style="width:90%"></el-input>
              </el-form-item>
            </el-col>
</el-form>

　　校验规则

rulesForm:{
        area:[{ required: false, message: '请输入', trigger: 'blur' }],
        channel:[{ required: true, message: '请选择', trigger: 'change' }],
 
      },

 

2 处理

　　在客户渠道选择变化的时候去修改rulesForm

toArea(e){
      if(e == '8' || e == '14' || e == '17'){
        this.rulesForm.area[0].required = true
      } else {
        this.rulesForm.area[0].required = false
      }
    },

 功能是实现了，但是存在一个问题，那就是渠道详情是必填的情况下，没有输入值，那么会提示填写

　　image

 此时，如果客户渠道变更，渠道详情变为非必填了，虽然渠道详情前面的必填星号没了，也能能够正常提交，但是这个输入框的红色校验和请输入提示还在，如下图

　　image

3 解决办法

　　在渠道详情变为非必填的时候，手动调用validateField方法去单独校验下渠道详情，解决了这个问题

toArea(e){
      // console.log(e)
      if(e == '8' || e == '14' || e == '17'){
        this.rulesForm.area[0].required = true
　　 　　this.$refs.form.validateField('area')

      } else {
        this.rulesForm.area[0].required = false
        this.$refs.form.validateField('area')
      }
    },

image