vue+ele 实现v-for动态数据循环表单,然后对每个结构进行表单校验的方法
项目开发时遇到form结构是动态遍历出来的,但是每个遍历出来的表单都需要做相对应的检验处理,ele提供的办法只能对单个表单有效,mou度很多方法都试了,但是都没有说出重点和要注意的地方!!!
下面贴出我实现的代码:
<el-form label-width="200px" class="dlrMode" ref="addInfo" :rules="DLRRules" :model="addInfo">
<el-card v-for="(item,
index) in addInfo.agentList" :key="index" style="margin-bottom:10px;" shadow="never">
<div slot="header">
<div>代理人({{index+1}})</div>
</div>
<el-form-item label="代理人名称:" :prop="'agentList.'+ index +'.sarmc'" :rules="DLRRules.sarmc">
<el-input placeholder="请输入代理人名称" v-model="addInfo.agentList[index].sarmc"></el-input>
</el-form-item>
</el-card>
</el-form>
data () {
return {
addInfo: {
agentList: []
},
DLRRules: { // 校验
sarmc: [
{ required: true, message: '请输入代理人名称', trigger: 'blur' }
],
},
}
}
下面要注意几个问题:
1、prop属性变成动态绑定的 :prop,
2、每一个需要动态校验的el-form-item,都需要用:prop和:rules进行值绑定
3、必须写成:prop="'agentList.'+ itemIndex + '.name'" (重点注意);不能写成:prop="'addInfo.agentList.'+ itemIndex + '.sarmc'" ,也不能直接写成:prop=“item.sarmc” ,一定要写成循环的数组的真实的名字,用item是无法指向到对应的值的
4、ele-form里的:model只识别对象obj
就这样轻松解决了form表单遍历结构进行校验的问题