element-ui +Vue 解决 table 里包含表单验证

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

这个校验中,最关键的问题在于如何给el-form-item 动态绑定prop。
:prop="'tableData.' + scope.$index + '.字段名'"

方法一:

 
 

上述代码中比较关键的部分有一下两点:
1、:prop="‘domains.’+scope.$index+’.name’" ,用于动态绑定prop到el-form-item;

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

方法二:

 
 

参考文章:https://blog.csdn.net/xiaojun081004/article/details/82988549
参考文章:https://www.cnblogs.com/Kummy/p/9470393.html

你可能感兴趣的:(element-ui,vue-js)