Vue3.0—element-plus表单嵌套表格实现动态表单验证【实战】关心是什么意思
我想有不少⼩伙伴都有遇到过表单嵌套表格，那么在这种情况下怎么实现动态验证呢？（即表单项可以动态添加/删除）
效果图如下
表格有添加和删除按钮，点击提交进⾏表单验证
element官⽅有给出，但是实际上⼤多数项⽬的需求⽆法满⾜，所以需要在其基础上进⾏修改
⾸先data格式必须是对象包裹数组
forms:{
tableData:[]
福林堂
}
然后表单绑定form数据
<el-form ref="forms":model="forms">
表格绑定tableData数据
<el-table ref="multipleTable":data="forms.tableData" border >
接下来给表单项增加验证规则
<el-table-column label="姓名" width="80">
通俗唱法教学
<template #default="{ row, $index }">尼罗鳄
<el-form-item :prop="`tableData.${$index}.realname`":rules="alname">
仲裁书<el-input type="text" placeholder="输⼊姓名" v-model="alname"></el-input>
</el-form-item>
</template>
</el-table-column>
rules对应data rules对象，prop对应表单字段（注意是表格⾥每⼀⾏对应的字段 forms.tableData[下标].key）
prop的关键就在于下标 $index
完整的html结构
<el-form ref="forms":model="forms">
<el-table ref="multipleTable":data="forms.tableData" tooltip-effect="dark" border >
<el-table-column type="lection" width="55"></el-table-column>
<el-table-column label="姓名" width="80">
<template #default="{ row, $index }">
<el-form-item :prop="`tableData.${$index}.realname`":rules="alname">
<el-input type="text" placeholder="输⼊姓名" v-model="alname"></el-input>
cad量面积
</el-form-item>
</template>
</el-table-column>
<el-table-column label="⾝份证号" show-overflow-tooltip>
<template #default="{ row, $index }">
<el-form-item :prop="`tableData.${$index}.idcard`":rules="rules.idcard">
<el-input type="text" placeholder="输⼊⾝份证号" v-model="row.idcard"></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="⼿机号码" show-overflow-tooltip>
<template #default="{ row, $index }">
<el-form-item :prop="`tableData.${$index}.mobile`":rules="bile">
<el-input type="number" placeholder="输⼊⼿机号码" v-model="bile"></el-input>
</el-form-item>
</template>
</el-table-column>
</el-table>想多了
<div class="flex_cen mt_15">
<el-button type="primary":disabled="forms.tableData.length==0"class="submit mr_20 fs_16" @click="ruleForms">确认提交</el-button> </div>
</el-form>
到这⾥基本上了，编译出来看看效果…
发现控制台冒红？？mmp
细⼼的同学应该发现了 -1 这个莫名其妙的东西，为什么下标会出现 -1 呢？怎么去解决它？！表慌～既然下标会出现-1，那我可不可以排除这个-1的下标呢？
下⾯我们加个条件判断试试
v-if="$index>=0"
尖椒皮蛋<el-form-item v-if="$index>=0":prop="`tableData.${$index}.realname`":rules="alname">
<el-input type="text" placeholder="输⼊姓名" v-model="alname"></el-input>
</el-form-item>
果然，控制台⼲净了！
试⼀下效果，数据绑定正常！表单验证正常！
nice~~~~~~
如果对你有帮助，点个赞再⾛吧~谢谢
关注我，不定时分享技术⼲货~
