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表单遍历结构进行校验的问题

Logo

前往低代码交流专区

更多推荐