微客导航 » 文章资讯 » 使用element-ui +Vue 解决 table 里包含表单验证的问题

使用element-ui +Vue 解决 table 里包含表单验证的问题

2023-07-20 16:43:03 279

应用场景：

在实际使用中经常会遇到需要在Form表单中使用table表格进行表单提交，同时又需要对table的字段进行校验，效果如图所示：

这个校验中，最关键的问题在于如何给el-form-item动态绑定prop。

:prop="'tableData.'+scope.$index+'.字段名'"

方法一：












submit

上述代码中比较关键的部分有一下两点：

1、:prop="‘domains.'+scope.$index+'.name'"，用于动态绑定prop到el-form-item；

2、this.$set(this.fromData,‘domains',this.domains)，用于为fromData设置domains这个节点。

方法二：












submit

补充知识：Vue+ElementUI完整增删查改验证功能的表格

我就废话不多说了，大家还是直接看代码吧~


















确定
取消

.block{ width:75%; margin-left:400px; margin-top:200px; }

以上这篇使用element-ui+Vue解决table里包含表单验证的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。