element表单嵌套检验+动态添加
在写表单的时候,容易碰到这种嵌套表单的数据校验,并且这种表单是动态添加的,网上大部分的做法是表单套表单,实际上只需要一个表单就可以了。
为了方便观看,这里只列举了两条数据
多级表单嵌套校验
<el-form
ref="ruleFormRef"
:model="ruleForm.FormTable"
:rules="rules"
label-width="80px"
class="demo-ruleForm"
label-position="left"
:size="formSize"
status-icon
>
<div class="addFrom">
<el-button @click="addGoodsInfo"><el-icon><Plus /></el-icon>添加</el-button>
<div class="addFrom_box" v-for="(item,index) in ruleForm.FormTable.goodsDetail" :key="index">
<!-- 嵌套检验 -->
<el-form-item label="商品编号"
:prop="`goodsDetail.`+index+`.name`"
:rules="[{ required: true, message: '请输入商品编号', trigger: 'blur' }]"
>
<el-form-item label="商品数量"
:prop="`goodsDetail.`+index+`.goodsNum`"
:rules="[{ required: true, message: '请输入商品数量', trigger: 'blur' }]">
<el-input-number :min="1" :max="10" v-model="item.goodsNum" placeholder="请输入" />
</el-form-item>
<el-input clearable v-model="item.name" placeholder="请输入商品编号" />
</el-form-item>
</div>
</div>
</el-form>
数据
// 为了演示校验,这里多套了一层
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)
}