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>