When you click on this article, you have a similar need, I hope this article can help you. 1. The tree structure to be verified is as follows:

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

Config_source_bos (config_source_bos, config_source_bos) ¶

Copy the code

Code: HTML:

<el-form :model="formData" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic"> <el-form-item Prop ="description" label=" description" :rules= "{required: true, message: 'Please enter description ', 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="' domain name '" :key="index" :prop="' config_source_BOS.' + index + '.value'" :rules="{required: true, message: 'Domain name cannot be empty ', trigger: 'blur' }"> <el-input v-model="domain.value"></el-input> <el-form-item v-for="(domain1, Index1) in domain.source_param_bos" :label="' domain name Child'+ INDEx1 ":key="index1" :prop="' config_SOURce_BOS.' +index + '.source_param_bos.' + index1 + '.value1'" :rules="{required: true, message: 'Domain name cannot be empty ', 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>Copy the code

Js: submit

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

Take an examination of the past directly to verify, if it is helpful to you, praise and pay attention to oh! Reprint with indication of source