el-form表单循环验证_el-form循环表单验证

<el-form label-position="right" :model="loginInfo" :inline="true" label-width="55px" :rules="rules">
            <div v-for="(item,index) in loginInfo.dataList" :key="index">
                <el-form-item label="用户名" :rules="rules.username" :prop="`dataList.${index}.username`">
                    <el-input v-model="loginInfo.username"></el-input>
                </el-form-item>
                <el-form-item label="密码" :rules="rules.password" :prop="`dataList.${index}.password`">
                    <el-input v-model="loginInfo.password"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" >取消</el-button>
                    <el-button type="primary" @click="doLogin">登录</el-button>
                </el-form-item>
            </div>
        </el-form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

这里要记住
1，数据结构是form.dataList,
2, div for循环在form里面
3，:rules="rules“，总from也要用。

   data(){
        return{
            loginInfo: {
                dataList: [{username:'', password:''}]
            },
            rules:{
                username:[{required: true, message: '请输入用户名', trigger: 'blur' }],
                password:[{required: true, message: '请输入用户名', trigger: 'blur' }],
            },
     }
  }
1
2
3
4
5
6
7
8
9
10
11

 this.$refs.loginInfo[index].validate((valid)=>{
                if(valid){
                    alert('提交成功')
                }
            })
1
2
3
4
5