问题
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
有问题的，欢迎在下方留言哦
