element-ui的form表单树型结构验证必填

当你点到这篇文章，说明你也有类似的需求，希望此篇文章能对你有帮助。
1，需要验证的树型结构如下：

formData:{
    "description": "", 
    "config_source_bos":[{
        "value":"",
        "source_param_bos":[{ 
            "value1":"", 
        }]
    }]
}

2，已vue为例来说明
对 "description": "",属性使用正常验证就行
主要针对"config_source_bos"里面的属性进行验证：
图：

image.png

代码：
html:

<el-form :model="formData" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
  <el-form-item
    prop="description"
    label="描述"
    :rules=
      "{ required: true, message: '请输入描述',       trigger: 'blur' }">
    <el-input v-model="formData.description"></el-input>
  </el-form-item>
  <el-form-item
    v-for="(domain, index) in formData.config_source_bos"
    :label="'域名'"
    :key="index"
    :prop="'config_source_bos.' + index + '.value'"
    :rules="{
      required: true, message: '域名不能为空', trigger: 'blur'
    }">
    <el-input v-model="domain.value"></el-input>
       <el-form-item
    v-for="(domain1, index1) in domain.source_param_bos"
    :label="'域名Child'+index1"
    :key="index1"
    :prop="'config_source_bos.' + index + '.source_param_bos.' + index1 + '.value1'"
    :rules="{
      required: true, message: '域名不能为空', trigger: 'blur'
    }" >
    <el-input v-model="domain1.value1"></el-input>
                                               
  </el-form-item>                                          
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
  </el-form-item>
</el-form>

js:提交

submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },

直接考过去验证，如果对你有帮助的话，点赞加关注哦！转载注明出处