（element-ui）v-for动态数据循环表单验证的处理方式

1.功能需求：使用element的表单验证方式，动态for循环的场景如何使用？如下图所示：

2.dom结构如下（重点）

注意：

1. userList和其他表单项在同一个form表单中

2.prop改为：prop，形式为'userList.'+index+'.name'

3.每一个循环中的<el-form-item>都需要加：rules

 <el-form :model="addInfo"
                 size="mini"
                 :rules="rules"
                 ref="addInfo">
            <el-form-item label="名称"
                          prop="title">
                <el-input v-model="addInfo.title" size="mini"/>
            </el-form-item>
            <div v-for="(item, index) in addInfo.userList" :key="index">
                <el-form-item label="账号："
                              :prop="'userList.'+ index +'.name'"
                              :rules="rules.username">
                    <el-input v-model="item.username"
                              size="mini"/>
                </el-form-item>
                <el-form-item label="密码："
                              :prop="'userList.'+ index +'.password'"
                              :rules="rules.password">
                    <el-input v-model="item.password"
                              type="password"/>
                </el-form-item>
                <el-form-item label="手机号："
                              :prop="'userList.'+ index +'.phone'"
                              :rules="rules.phone">
                    <el-input v-model="item.phone"
                              size="mini"/>
                </el-form-item>
            </div>
        </el-form>

3.data结构如下：rules为个表单项的验证规则，addInfo是表单绑定的数据结构

        data(){
                return {
                    rules: {
                        name: [{
                                required: true,
                                message: '请输入名称',
                                trigger: 'blur'}],
                        phone: [{
                                required: true,
                                message: '请输入账号手机号',
                                trigger: 'blur'}],
                        username: [{
                                required: true,
                                message: '请输入账号名称',
                                trigger: 'blur'}],
                        password: [{
                                required: true,
                                message: '请输入密码',
                                trigger: 'blur'}
                        ]
                    }, // 添加校验
                    addInfo: {
                        name: '',
                        userList: [{
                            phone: '',
                            username: '',
                            password: ''
                        }]
                    }
                };