JS实现表单中整行添加删除并检验字段_遍历表单校验删除一项,校验没删除-优快云博客

本文链接：https://blog.youkuaiyun.com/wang13679201813/article/details/124748824

本文介绍如何在Vue.js应用中实现动态表单，允许用户添加和删除表单行，并进行字段验证。示例代码展示了如何使用v-for循环遍历表单数据，v-model绑定每个输入字段，以及利用prop属性进行表单验证。同时提供了添加和删除表单行的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JS实现表单中某行添加删除并检验字段
在这里插入图片描述

注意:
1、循环的是form.kaDevice，属于form里面的某一项；

2、每行里面的v-model是kaitem.bid，增加与删除按钮通过kaindex索引

3、表单检验，prop的路径一定要写正确，如示例

<kui-row v-for="(kaitem,kaindex) in form.kaDevice" :key="kaindex" style="margin-left: 0.5vh">
    <kui-col :span="5">
        <kui-form-item label="信息类别码" :prop="'kaDevice.' + kaindex + '.bid'" :rules="{validator:$valid.regSixAll}">
    	<kui-input placeholder="请输入" v-model="kaitem.bid" ></kui-input>
        </kui-form-item>
    </kui-col>
    <kui-col :span="6">
    <kui-form-item label="有效状态" :prop="'kaDevice.' + kaindex + '.validStatus'" label-width="90px"  :rules="{validator:$valid.regSixAll}">
        <kui-input placeholder="请输入" v-model="kaitem.validStatus"></kui-input>
    </kui-form-item>
</kui-col>
    <kui-col :span="2">
        <kui-form-item label-width="30px">
            <i class="kui-icon-a-plus-circle" v-if="kaindex == 0" style="font-size: 30px; color: #8094ff; "  @click="addKaItem()"></i>
            <i class="kui-icon-a-minus-circle" v-if="kaindex != 0" style="font-size: 30px; color: #D14343" @click="delKaItem(kaindex)"></i>
        </kui-form-item>
    </kui-col>
</kui-row>
data(){
    return{
         form{
             xxx:'',
             kaDevice:[{bid:'',validStatus:''}]         
         }
    }
}
methods:{
 addKaItem(){
  	this.form.kaDevice.push({
    bid:'',
    validStatus:''
  });
 },
  delKaItem(index){
 	   this.form.kaDevice.splice(index,1)
  },
}