vue + element 动态表单（多层级）添加校验

╰+哭是因爲堅強的太久メ 2022-09-04 05:53 243阅读 0赞

以前遇到过给动态添加的表单项添加校验，但是做过之后就忘记了，时隔一年多，又遇到这样的需求，还是多层级的数据结构，所以决定借这个机会写一篇文章记录一下！！！

废话不多说，直接上代码！

<el-form :model="dataInfo" ref="dataInfo" label-width="40px">
    	<div v-for="(item,index) in dataInfo.list">
    		<el-form-item 
      			:label="`${index+1}、`" 
        		:prop="'list.' + index + '.objName'"
        		:rules="[{required:true,message:'该项不能为空',trigger:'change'}]">
    		    <el-input style="width: 95%;" v-model="item.objName" placeholder="请输入" size="small"></el-input>
    		</el-form-item>
    		<template>
    			<div style="margin-left: 40px;" v-for="(it,indexs) in item.objList">
           			<el-form-item
            			:prop="'list.' + index +'.objList.' + indexs + '.objListName'"
            			:rules="[{required:true,message:'该项不能为空',trigger:'change'}]">
    				    
    				    <span slot='label'>
    			    		<img src="@/assets/images/radio.png" />
    			    	</span>
    			    	<el-input style="width: 95%;" size="small" v-model="it.objListName"></el-input>
    				</el-form-item>
    			  </div>
    		</template>
    	</div>
    </el-form>
    
    //数据
    data（）{ 
    	return{ 
    		dattInfo：{ 
    			list：[]
    		}
    	}
    }
    methods:{ 
    	//提交、校验
    	submit（）{ 
    		this.$refs.dattInfo.validate(valid =>{ 
    			if(valid){ 
    				console.log('表单校验通过');
    			}else{ 
    				console.log('表单校验不通过');
    			}
    		})
    	}
    }

注意：  
1.特别注意 prop 和 rules 的绑定， prop 里面的名称必须和输入框绑定的属性名称对应起来。  
2. dattInfo 必须是一个对象，循环的是对象里面的 list 数组，往 list 数组里面动态增加数据。  
3. 循环体里面再次添加动态的表单时，注意 indexs 和外层 index 的区别。