el-form-item下多个form-item项校验（循环校验）

el-form-item下多个form-item项校验

去年在编写一个页面的时候，要求自定义字段，可以动态的循环添加，还要增加表单验证，在这块的内容的编写不太熟练，最后参照着网上的一些资料，主要参考这个博主https://blog.csdn.net/l508742729/article/details/108286071的博客，完成了这一项任务的开发。具体实现页面如下所示。


前端代码实现如下所示，主要是通过prop来确定好每一个表单验证的值

   <el-form-item label="自定义字段:" class="is-required" >
      <div v-for="(item, index) in add.custom" :key="index">
         <el-form-item :rules="rules.key" :prop="'custom.' + index + '.key'">
            <el-input v-model.trim="item.key" placeholder="Key"  style="width:100px">
            </el-input>
         </el-form-item>
         <el-form-item :rules="rules.value" :prop="'custom.' + index + '.value'">
            <el-input v-model.trim="item.value" placeholder="Value"  style="width:150px; margin-left: -5px;" @change.native="change(item)">
           </el-input>
        </el-form-item>
            <i class="el-icon-plus changecolor" @click="addItem(add.custom.length)"></i>
            <i class="el-icon-minus changecolor" v-if="index !== 0" @click="deleteItem(item,index)"></i>
            <br />
      </div>
   </el-form-item>

逻辑代码部分

<script>
export default {
    name:'add',
    data() {
        return {
            add:{
                custom: [
                    {
                        key: '',
                        value: '',
                    }
                ]
            },
            rules: {
              key:{
                required: true,
                trigger: 'change',
                message:'key值不能为空'
              },
              value:{
                required: true,
                trigger: 'change',
                message:'value值不能为空'
              },
            },
        }
    },
    methods: {
        addItem(length){
            if (length >= 3) {
                this.$message({
                    type: 'warning',
                    message: '最多可新增3条!'
                })
            } else {
                this.add.custom.push({
                    key: '',
                    value: '',
                })
            }
        },
        deleteItem(item, index) {
            this.add.custom.splice(index, 1)
        },
        change(item){
          if(item.key==''){
                this.$message({
                    type: "warning",
                    message: "key值为空,不能保存"
                })
            item.value = ''
          }
        },
    },
}
</script>

如此，开发就完成了