element表单嵌套检验+动态添加

在写表单的时候，容易碰到这种嵌套表单的数据校验，并且这种表单是动态添加的，网上大部分的做法是表单套表单，实际上只需要一个表单就可以了。
为了方便观看，这里只列举了两条数据

多级表单嵌套校验

  

            

                添加
                 

                    
                    
                    
                    
                    
                    
                    
                    
                 
            

  

数据

// 为了演示校验，这里多套了一层
const ruleForm = reactive({
    FormTable:{
        name: 'fanction',
        goodsDetail : [
            {id:null,name:null,goodsNum:null,store:null}
        ]
    }
})

此处的数据里是一个对象内套了一个数组对象，正常情况下，校验是通过prop对module里面的数据进行校验，但此处是数组，数据在数组内部，所以用一般的prop指定数据名是校验不了的，这里用的是

:prop="goodsDetail.+index+.name"

只需要在prop中指定到当前数据在module里的位置即可。此处的goodsDetail就是v-for中ruleForm.FormTable.goodsDetail的最后面一位，向下寻找，goodsDetail[index].name就是当前的数据，只不过这里改成了xxx.xxx.xxx的链式写法。

校验规则写在el-form-item上面：

:rules="[{ required: true, message: '请输入商品编号', trigger: 'blur' }]"

动态添加，只需要给数组末尾添加一个空对象即可。

// 添加按钮
const addGoodsInfo = () => {
    ruleForm.FormTable.goodsDetail.push({id:null,name:null,goodsNum:null,store:null})
}

动态删除，给当前条添加一个点击事件，找到当前条删除。

// 删除按钮
const deleteGodos = (index : number) => {
   console.log(index);
   ruleForm.FormTable.goodsDetail.splice(index,1)
}