当前位置：首页 > news >正文

vue 动态增删行，并form表单校验（附v2\v3）

news 2025/7/13 19:10:25

Vue3 组件用的 ant 可以换成你们用，主要是form校验
在这里插入图片描述

前端代码
<a-formref="formRef":model="formData":label-col-props="{ span: 5 }":wrapper-col-props="{ span: 17 }"><a-row><a-form-itemlabel="角色单位":rules="[{required: true,message: '请选择角色',},]"><a-row><a-col v-for="(item, index) in formData.arr" :key="index"><a-space><a-form-itemhide-label:field="`arr.${index}.roleId`":rules="[{required: true,message: '请选择角色',},]"><a-select v-model="item.roleId" placeholder="请选择角色" style="width: 150px"><a-optionv-for="it in roleList":key="it.id":value="it.id">{{ it.roleName }}</a-option></a-select></a-form-item><a-form-itemhide-label:field="`arr.${index}.deptIds`":rules="[{required: true,message: '请选择部门',},]"><a-tree-selectv-model="item.deptIds":multiple="true":allow-clear="true":allow-search="true":data="deptList":field-names="{ key: 'id', title: 'name' }"placeholder="请选择部门"style="width: 300px"></a-tree-select></a-form-item></a-space><a-button @click="xx" type="text">增加</a-button><a-button @click="zz(index)" type="text">删除</a-button></a-col></a-row></a-form-item></a-row></a-form>
js 方法
const formRef = ref(); // 校验
const formData = ref({ // form 对象arr: [{roleId: '',deptIds: []}] // 无限增加的数组
}); // 新增一行
const xx = () => {formData.value.arr.push({roleId: '',deptIds: []})
}
// 删除一行
const zz = (index:any) => {formData.value.arr.splice(index, 1)
}// 点击确定按钮 提交之类的  先在校验一次
const submit11 = () =>{const validateRes = await formRef.value?.validate();if (validateRes) return;// 通过后这里自己的逻辑
}

vue2的

<a-form-model:model="form2"ref="ruleForm"><a-table :columns="columns" :dataSource="form2.outDetailVOList" bordered><template #outNumber='text, record, index'><a-form-model-item:prop="'outDetailVOList.' + index + '.outNumber'":rules="{required: true,message: '请填写出库量',trigger: 'blur',}":disabled="action === 'info' "><a-inputv-model="form2.outDetailVOList[index].outNumber":disabled="action === 'info' "placeholder="请填写出库量"type='number'/></a-form-model-item></template><template #action='text, record, index' ><a v-if="action === 'add' " @click='delCommodity(index)'>删除</a></template></a-table></a-form-model>
const columns = [{title: '领取出库数量',dataIndex: 'outNumber',width: '200px',scopedSlots: { customRender: 'outNumber' }}
]data () {return {form2: {outDetailVOList: [{outNumber: ''}]},}},// 删除商品delCommodity (index) {console.log('', index)// if (this.form2.outDetailVOList.length > 1) {this.form2.outDetailVOList.splice(index, 1)// }},//  在你的提交方法里加 校验
this.$refs.ruleForm.validate(valid => {if (!valid) {console.log('error submit!!没通过校验')return false}})