element el-form嵌套el-table双层循环验证

这里只放简洁代码

html

<div class="cardCont">
  <div v-for="(item,index) in formData" :key="index">
     <el-form :ref="'form'" :model="formItemData(index)" :rules='formRules' class="cargoForm"  :key="'form'+index">
       <el-table border ref="table" :data="formData[index].goodsList"  :key="'table'+index" >
       <el-table-column>
         <template slot-scope="scope">
           <el-form-item :prop="'goodsList.'+scope.$index+'.goodsName'" :rules="formRules.goodsName">
             <el-input v-model="scope.row.goodsName" placeholder="货物名称"></el-input>
          </el-form-item>
         </template>
       </el-table-column>
       </el-table>
     </el-form>
  </div>
<el-button @click='validateForm()'>验证</el-button>
</div>
           

 大致数据格式

formData:[
   {     
      userName: "",       
      goodsList: [{
          "goodsName": "",
          "goodsPack": "",
      }]
    }, {
           
      userName: "",
      goodsList: [{
          "goodsName": "",
          "goodsPack": "",
      }]
  },
]
           

methods 、computed

methods: {
 validateForm() {
      let flagArr = []
      this.$refs.form.forEach(item=>{
        item.validate((valid) => {
          flagArr.push( valid)
        })
      })
      let flag = flagArr.every((item, index) => {
        return item
      })
      return flag
    },
},

  computed: {
    formItemData() {
      return function (index) {
        return this.formData[index]
      }
    }
  },