vue+element el-form中多重表单验证问题

实现效果

1.根据项目需求 实现下面展示

2.由于存在表单校验且数据格式如下(根据项目需求改造数据结构)如下：

[{
   name: '张三',
   rules: {
     insuranceAmount: { type: 'string', required: true, message: '填写医疗', trigger: 'blur' },
     suggestedPremium: { type: 'string', required: true, message: '填写保费', trigger: 'blur' },
   },
   list: [{ insuranceType: '医疗', insuranceAmount: '', suggestedPremium: '', showFlag: false },
     { insuranceType: '重疾', insuranceAmount: '', suggestedPremium: '', showFlag: false }]
   },
   {
    name: '李四',
    rules: {
      insuranceAmount: { type: 'string', required: true, message: '填写医疗', trigger: 'blur' },
      suggestedPremium: { type: 'string', required: true, message: '填写保费', trigger: 'blur' },
    },
    list: [{ insuranceType: '医疗', insuranceAmount: '', suggestedPremium: '', showFlag: false },
      { insuranceType: '重疾', insuranceAmount: '', suggestedPremium: '', showFlag: false }]
 }]

3.每一列添加显示隐藏按钮-隐藏后当前行表单不做校验（类似以下图）

4.所以提交时对每个表单都要做校验(html部分)

5.js提交处理部分

 let newArr = []
 this.wrapList.forEach((ele, index) => {
    this.$refs['form'][index].validate((valid) => {
      if (valid) {
        newArr.push(true)
      } else {
        newArr.push(false)
      }
    })
  })
  let flag = newArr.every((val) => {
    return val == true
  })

  if (flag) {
    console.log('信息填写完整')
  } else {
    console.log('信息未填写完整')
  }

6.完整代码如下（只提供了一个简单demo供参考）

  
  
  
  
  



  

    

      

        
          
姓名: {{item.name}}
          
            
              
            
            
              
            
            
              
            
          
        
      
      提交
    
  

有问题一起讨论