当前位置: 首页 > Web前端 > HTML

元素表单嵌套校验+动态添加

时间:2023-03-28 11:25:47 HTML

写表单的时候很容易遇到这种嵌套表单的数据校验,动态添加这种表单。网上的方法大多是表格嵌套表格。网站上只需要一张表格。为了方便查看,这里只提供两个数据多级表单嵌套验证添加

Data//用于演示验证,这里多套了一层construleForm=reactive({FormTable:{name:'faction',goodsDetail:[{id:null,name:null,goodsNum:null,store:null}]}})这里的数据是一个object设置了一个数组对象。一般情况下校验都是通过props来校验模块中的数据,但是这里是一个数组,数据在数组内部,所以用一个通用的prop指定数据名是无法校验的。这里使用的是:prop="goodsDetail.+index+.name"只需要在prop中指定当前数据在模块中的位置这里的goodsDetail是v-for中ruleForm.FormTable.goodsDetail的最后一位,往下看,goodsDetail[index].name是当前数据,不过这里改成了xxx.xxx.xxx的链式写法。验证规则写在el-form-item::rules="[{required:true,message:'Pleaseentertheitemnumber',trigger:'blur'}]"动态添加,加个空格即可在数组对象的末尾。//添加按钮constaddGoodsInfo=()=>{ruleForm.FormTable.goodsDetail.push({id:null,name:null,goodsNum:null,store:null})}动态删除,给当前栏添加点击事件,找到当前条目并删除它。//删除按钮constdeleteGodos=(index:number)=>{console.log(index);ruleForm.FormTable.goodsDetail.splice(index,1)}