element-ui中的多层表单循环验证处理

项目中有如下需求：

可以添加一个列表 => 添加弹框 => 里面可以添加多个产品（产品里面可以添加多个对接人跟政策），所以数据结构应该如下

ruleForm: {
        companyName: '', // 公司名称
        financialProduct: [
          // 产品数组
          {
            productName: '', // 产品名称
            dockingPerson: [
              // 对接人
              {
                dockingName: '', // 联系人
              }
            ],
            financialPolicy: [
              // 返利政策
              {
                makeWay: '', // 计提条件
              }
            ]
          }
        ]
      },

但是在提交表单的时候验证不了，rule不起作用，因为数据是循环出来的，所以不起作用，解决办法如下

<template>
  <div class="addProduct_wrapper">
      <!-- 中间内容区域 -->
      <div class="center_content">
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          label-width="80px"
          :rules="rules">
          <!-- 上方的列表 -->
          <div class="basic_info">
            <div class="info_box">
              <el-form-item label="公司名称" prop="companyName">
                <el-input placeholder="请输入公司的名称" v-model="ruleForm.companyName"></el-input>
              </el-form-item>
            </div>
          <!-- 产品盒子 -->
          <div class="product_box" v-for="(item, index) in ruleForm.financialProduct" :key="index">
            <!-- 关闭按钮 -->
            <span class="closeBtn" @click="delateProduct(index)" v-if="index !== 0">X</span>
            <!-- 产品详情 -->
            <div class="product_detail">
              <el-form-item label="产品详情"></el-form-item>
              <!-- name盒子 -->
              <div class="name_box">
                <div style="width: 300px;">
                  <el-form-item label="产品名称"
                    :prop="`financialProduct.${index}.productName`"
                    :rules="financialProductRules.productName">
                    <el-input placeholder="请输入产品名称" v-model="item.productName"></el-input>
                  </el-form-item>
                </div>
              </div>
            </div>
            <!-- 对接人 -->
            <div class="pickPeople">
              <el-form-item label="对接人" label-width="95px"></el-form-item>
              <div class="people_wrapper" v-for="(items, indexs) in ruleForm.financialProduct[index].dockingPerson" :key="indexs">
                <div>
                  <el-form-item label="对接人"
                    :prop="`financialProduct.${index}.dockingPerson.${indexs}.dockingName`"
                    :rules="dockingPerson.dockingName"
                  >
                    <el-input placeholder="请输入联系人姓名" v-model="items.dockingName"></el-input>
                  </el-form-item>
                </div>
              </div>
              <el-button type="primary" style="margin-left: 10px;" @click="addPickPeople(index)">添加对接人</el-button>
            </div>
            <!-- 政策 -->
            <div class="rebatePolicy">
              <el-form-item label="政策"></el-form-item>
              <div class="rebate_box" v-for="(homes, indexHomes) in item.financialPolicy" :key="indexHomes">
                <div>
                  <el-form-item label="政策"
                    :prop="`financialProduct.${index}.financialPolicy.${indexHomes}.makeWay`"
                    :rules="dockingPerson.makeWay"
                  >
                    <el-input placeholder="政策" v-model="homes.makeWay"></el-input>
                  </el-form-item>
                </div>
                <div>
                  <el-form-item label="">
                    <el-button type="primary" @click="delateRebatePolicy(item.financialPolicy, indexHomes)" v-if="editStatus !== 3">删除</el-button>
                  </el-form-item>
                </div>
              </div>
              <el-button type="primary" style="margin-left: 10px;" @click="addRebatePolicy(index)" v-if="editStatus !== 3">添加政策</el-button>
            </div>
          </div>
          <!-- 添加产品 -->
          <el-button type="primary" style="margin: 20px 0px 30px 32px;" @click="addProduct()" v-if="editStatus !== 3">添加产品</el-button>
          <div class="btn_submit" v-if="editStatus !== 3">
            <el-form-item>
              <el-button type="primary" @click="onSubmit(ruleForm)">确认保存</el-button>
              <el-button @click="closeLayers">取消</el-button>
            </el-form-item>
          </div>
        </el-form>
      </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      ruleForm: {
        companyName: '', // 公司名称
        financialProduct: [
          // 产品数组
          {
            productName: '', // 产品名称
            dockingPerson: [
              // 对接人
              {
                dockingName: '', // 联系人
              }
            ],
            financialPolicy: [
              // 返利政策
              {
                makeWay: '', // 计提条件
              }
            ]
          }
        ]
      },
      rules: {
        companyName: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ],
      },
      financialProductRules: {
        productName: [
          { required: true, message: '请输入产品名称', trigger: 'blur' }
        ]
      },
      dockingPerson: {
        dockingName: [
          { required: true, message: '请输入联系人姓名', trigger: 'blur' }
        ],
        makeWay: [
          { required: true, message: '请输入计提条件', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    onSubmit(formName) {
      this.$refs['ruleForm'].validate(valid => {
        if (valid) {
          console.log(this.ruleForm, '提交的表单');
        } else {
          return false;
        }
      });
    },
  },
};
</script>
<style scoped lang="scss">

</style>