使用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这个节点。

方法二:

 
 

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

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






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

你可能感兴趣的:(使用element-ui +Vue 解决 table 里包含表单验证的问题)