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标签
<el-form ref="form" :model="form">
  <el-form-item label="key1" label-width="100px" prop="key1" >
    <el-input  v-model="form.key1"></el-input>
  </el-form-item>
  <el-form-item label="key2" label-width="100px" prop="key2" >
    <el-input  v-model="form.key2"></el-input>
  </el-form-item>
  <div v-for="(item, i) in form.key3"  :key="i">
    <el-form-item label="key3_key1" label-width="100px"  >
      <el-input  v-model="item.key3_key1"></el-input>
    </el-form-item>
    <el-form-item label="key3_key2" label-width="100px"  >
      <el-input  v-model="item.key3_key2"></el-input>
    </el-form-item>
  </div> 
</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
<el-form ref="form" :model="form" :rules="rules">
  ...
</el-form>

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

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

• 第一步：设置<el-form-item>中key3_key1和key3_key2的prop值

<div v-for="(item, i) in form.key3">
  <el-form-item label="key3_key1" label-width="100px"  :prop="'key3.'+ i +'.key3_key1'">
    <el-input  v-model="item.key3_key1"></el-input>
  </el-form-item>
  <el-form-item label="key3_key2" label-width="100px"  :prop="'key3.'+ i +'.key3_key2'">
    <el-input  v-model="item.key3_key2"></el-input>
  </el-form-item>
</div> 

注意观察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标签上
<div v-for="(item, i) in form.key3">
  <el-form-item label="key3_key1" label-width="100px"  :prop="'key3.'+ i +'.key3_key1'"  :rules="productGroupRules.key3_key1">
    <el-input  v-model="item.key3_key1"></el-input>
  </el-form-item>
  <el-form-item label="key3_key2" label-width="100px"  :prop="'key3.'+ i +'.key3_key2'"  :rules="productGroupRules.key3_key2">
    <el-input  v-model="item.key3_key2"></el-input>
  </el-form-item>
</div>

结果

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

image.png

源代码

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