element 循环表单校验

2020-11-17 624 阅读1分钟

1.html

a. 需要绑定model,

b. 每个el-form-item 绑定rules

c. :prop="list.${index}.orgcord" or :prop="'list.' + index +'.orgcord'" prop 的拼接

 <el-form :rules="orgRules" :model="org">         
    <el-row :gutter="8" v-for="(item,index) in org.list" class="org-list" :key="index">            
        <el-col :span="10" >          
             <el-form-item label="统一社会信用代码：" :prop="'list.' + index +'.orgcord'" :rules="orgRules.orgcord">            
                <el-input v-model="item.orgcord" :disabled="!item.deleteFlag" placeholder="请输入统一社会信用代码"></el-input>            
            </el-form-item>
             .......
             ......           
         </el-col>
    </el-row>
</el-form>

2. js

data(){
    var validateName= (rule, value, callback) =>{        ..........
    }
    return {
        org:{     
             list:[{
                 orgcord:'',
                 .......
                 }]
        },
        orgRules:{
            orgcord:[
                {required:true,validator:validateName,trigger:'blur'}
            ]
        }    
    }
},