element-ui动态新加一行,动态表单验证
先看效果图:
以上是一个表单,俱乐部的名称是必填的;俱乐部成员是一个table数据,至少有一个,且可以点击添加按钮添加多个 ,但动态添加的行都需要进行表单验证。这里演示说明,电话没有做正则验证。代码如下:
"dialogVisible" width="50%"> ref="myform" :model="myform" label-width="120px" :rules="rules"> "俱乐部名称" prop="jlbName"> "myform.jlbName" /> "俱乐部成员"> "el-icon-plus" type="success" size="mini" @click="chickPlus">添加 "myform.userList" align="center"> "姓名"> "scope"> :prop="`userList.${scope.$index}.chinaName`" :rules="rules.chinaName"> "scope.row.chinaName" /> "电话"> "scope"> :prop="`userList.${scope.$index}.phone`" :rules="rules.phone"> "scope.row.phone" /> "footer" class="dialog-footer">"dialogVisible = false">取消 "primary" @click="handleCreate">保存
从代码可以看出,在el-form-item标签中嵌套了el-table标签,在el-table中每一列又包含了el-form-item,也就需要对此进行验证。scope.$index表示每一行的索引值,而${scope.$index}结合prop就绑定了每一行每一列的验证。