el-form动态表单嵌套验证

prop=循环对象.下标.子属性

<template>
  <el-form
    :model="dynamicValidateForm"
    ref="dynamicValidateForm"
    label-width="100px"
    class="demo-dynamic"
  >
    <el-form-item
      prop="email"
      label="邮箱"
      :rules="[
        { required: true, message: '请输入邮箱地址', trigger: 'blur' },
        {
          type: 'email',
          message: '请输入正确的邮箱地址',
          trigger: ['blur', 'change'],
        },
      ]"
    >
      <el-input v-model="dynamicValidateForm.email"></el-input>
    </el-form-item>
 
    <template v-for="(domain, index) in dynamicValidateForm.domains">
      <el-form-item
        :label="domain.name + index"
        :key="domain.key"
        :prop="'domains.' + index + '.value'"
        :rules="{
          required: true,
          message: domain.name + '不能为空',
          trigger: 'blur',
        }"
      >
        <el-input v-model="domain.value"></el-input>
      </el-form-item>
      <el-form-item
        v-for="(items, indexs) in domain.children"
        :key="items.key"
        :label="items.name + indexs"
        :prop="'domains.' + index + '.children.' + indexs + '.value'"
        :rules="{
          required: true,
          message: items.name + '不能为空',
          trigger: 'blur',
        }"
      >
        <el-input v-model="items.value"></el-input>
      </el-form-item>
    </template>
    <el-form-item>
      <el-button type="primary" @click="submitForm('dynamicValidateForm')"
        >提交</el-button
      >
    </el-form-item>
  </el-form>
</template>
 
<script>
export default {
  data () {
    return {
      dynamicValidateForm: {
        domains: [
          { name: '姓名', value: "", key: 1 },
          { name: '家庭', value: "", key: 2, children: [{ name: '爸爸', value: "", key: 11 }, { name: '妈妈', value: "", key: 22 }] },
        ]
 
      }
    }
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
  },
}
</script>