el-form标签中rules的配置，遇到数组如何配置rules

问题

elementUI框架中的el-form标签中的rules遇到数组改怎么配置？

描述

基本数据如下所示，form数据中包含一个数组，那么数组中的rules该怎么设置呢？

// form表单的数据
form: {
  key1: '',
  key2: '',
  key3: [
    {
      key3_key1: '',
      key3_key2: ''
    },
   {
      key3_key1: '',
      key3_key2: ''
    }
  ]
}
// el-form标签

  
    
  
  
    
  
  

    
      
    
    
      
    
  
 

增加普通的rules

增加普通的rules，然后就可以规定key1值必填（会出现一个小红星），key2值必填并且是数字。

// rules规则
rules: {
  key1: [
    {required: true, message: '请填写key1值', trigger: 'change'}
  ],
  key2: [
    { type: 'number', required: true, message: '请正确的填写key2值', trigger: 'change' }
  ]
}
// el-form表单上增加rules

  ...

增加完成key1，key2值的填写规则，但是key3数组中的key3_key1值和key3_key2也是必填，并且有自己的填写规则，那么这个怎么实现呢？

为key3数组中的key3_key1值和key3_key2增加rules

• 第一步：设置中key3_key1和key3_key2的prop值

注意观察prop值，'key3.'(form数组的字段名称) + i (v-for数组中的循环的index) + '.key3_key1'(数组中每个对象的字段名称)
重点注意：注意key3后面有一个点，key3_key1前面也有一个点，千万要住点不要丢了。

• 第二步：编写rules

// rules值
productGroupRules: {
  key3_key1: [
     {required: true, message: '请填写key3_key1值', trigger: 'change'}
  ],
  key3_key2: [
    { type: 'number', required: true, message: '请正确的填写key3_key2值', trigger: 'change' }
  ]
}
// 将rules作为属性加到对应的el-form-item标签上

  
    
  
  
    
  

结果

下图中，所有的key值前面都出现了小红星，说明是生效了，rules是都生效了，完美结束。

image.png

源代码

提供源代码哦
链接：https://pan.baidu.com/s/1wj90rA_SXe6IPUW-d6zXNg
提取码：tpau
有问题的，欢迎在下方留言哦