checkbox嵌套不同表单项及动态校验

图示：

实现思路：

1. 单个表单项绑定：第二个表单项去除label字段，想要里层校验生效，里层的input和按钮都需要绑定prop值；
2. 表单校验：自定义表单校验，在自定义校验中获取需要校验的对象并进行条件校验
3. 取消选中则置空值（若全部取消选中则重做选中校验提示）

代码：

<el-form :model="editionForm" :rules="rules" ref="editionForm" label-width="110px">
  <el-form-item label="客户端" style="margin-bottom:22px;" prop="ios">
    <template>
      <el-checkbox v-model="editionForm.ios" label="苹果" @change="changeIos">
        <el-form-item label="苹果" prop="iosUrl" label-width="40px">
          <el-input v-model="editionForm.iosUrl" placeholder="请输入appstore地址" @input="inputValue"></el-input>
        </el-form-item>
      </el-checkbox>
    </template>
  </el-form-item>
  <el-form-item prop="android">
    <el-checkbox v-model="editionForm.android" label="安卓" @change="changeAndroid">
      <template>
        <el-form-item label="安卓" prop="androidUrl" label-width="40px">
          <el-upload class="upload" ref="upload" :action="uploadAction" :limit="1" :file-list="fileList" :auto-upload="true" :on-success="handleUploadSuccess" :show-file-list="false">
            <el-button v-model="editionForm.androidUrl"  size="small" type="primary">点击上传安装包</el-button>
          </el-upload>
        </el-form-item>
      </template>
    </el-checkbox>
  </el-form-item>
</el-form>

<script>
export default {
  data() {
    const validateIos = (vm) => {
      return (rule, value, callback) => {
        let {ios, iosUrl, android, androidUrl} = vm.editionForm
        if(ios){
          if(iosUrl) {
            callback()
          }else{
            callback(new Error("必填,请输入"))
          }
        }else if(android&&androidUrl&&!ios&&!iosUrl){
          callback()
        }else{
          callback(new Error("必选,请选择"))
        }
      }  
    }
    const validateAndroid = (vm) => {
      return (rule, value, callback) => {
        let {android, androidUrl, ios, iosUrl} = vm.editionForm
        if(android) {
          if(androidUrl) {
            callback()
          }else{
            callback(new Error("必传,请上传"))
          }
        }else if(ios&&iosUrl&&!android&&!androidUrl){
          callback()
        }else{
          callback(new Error("必选,请选择"))
        }
      }
    }
    return {
      fileList:[],
      uploadAction: '填写接口地址（例如：/v1/oss/uploadFile）',
      editionForm:{
        android: false,
        ios: false,
        iosUrl:"",
        androidUrl:"",
      },
      rules:{
        ios: [{ validator: validateIos(this), trigger: "change" }],
        android: [{ validator: validateAndroid(this), trigger: "change" }],
      },
    };
  },
  methods: {
   //获取上传安装包地址、清空校验
    handleUploadSuccess(res){
      this.editionForm.androidUrl=res.data
      if (this.editionForm.androidUrl) {
        this.$nextTick(()=>{
          this.$refs.editionForm.clearValidate(["android"]);
        })
	    }
    },
    //清空校验
    inputValue(){
      if(this.editionForm.iosUrl){
        this.$nextTick(()=>{
          this.$refs.editionForm.clearValidate(["ios"]);
        })
      }
    },
    //改变选中状态及内容(ios)
    changeIos(){
      if(!this.editionForm.ios){
        this.editionForm.iosUrl=""
      }
    },
    //改变选中状态及内容(android)
    changeAndroid(){
      if(!this.editionForm.android){
        this.editionForm.androidUrl=""
      }
    },
  }
};
</script>

注意！校验时会遇到一些问题：

1. 赋值后需要监听，在获取值后手动移除校验
2. 在使用clearValidate方法单项移除校验时会有失效问题存在，首先是方法不生效会有错误提示，要将clearValidate放入nextTick中；第二是控制台及语法不报任何错误时不生效，注意移除校验的对象必须是rules里定义的对象。