Vue elementUI表单嵌套表格并对每行进行校验的示例分析

魁首哥

作者

Vue elementUI表单嵌套表格并对每行进行校验的示例分析

这篇文章主要介绍VueelementUI表单嵌套表格并对每行进行校验的示例分析，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

效果展示

先看看这是不是需要的效果^_^

如图，ElementUI 表单里嵌套了表格，表格内每行能进行【保存】【新增】【编辑】【删除】【重置】等操作，同时可以对每行的某些字段进行校验（而不是整个表单校验！），这种需求很常见，所以记录下来。

代码链接

gitee地址

关键代码

表格数据

//数据格式必须是【对象嵌套数组】，【form】绑定表单，【list】绑定表格form:{//表格数据list:[{id:1,name:'小叶',age:'12',phone:'123456',show:true},{id:2,name:'小李',age:'23',phone:'123457',show:true},{id:3,name:'小林',age:'12',phone:'123458',show:true}]},

组件嵌套

添加字段校验的时候，格式必须写成这样的 :prop="'list.' + scope.$index + '.name'"
这是 elementui 规定的格式，渲染后的结果为 list.1.name
每个字段要动态绑定表单的 rules 属性
如果不是以上的格式，会出错！！！

//表单必须嵌套在表格的外面，表单必须绑定【rules】【ref】属性//每个字段动态的绑定表单的【prop】【rules】属性

校验方法

表单的字段对象存在于 this.$refs['form'].fields 中，并且字段对象具有 prop【datas.1.name】属性和 validateField 方法【验证 datas.1.name 能否通过校验】
但是 validateField 方法需要手动创建来验证能否通过校验
必须创建，否则会出错！！！

//表单校验方法//【form】是需要校验的表单，就是表单中【ref】绑定的字段//【index】是需要传入的行数，字段【scope.$index】validateField(form,index){letresult=true;for(letitemofthis.$refs[form].fields){if(item.prop.split(".")[1]==index){this.$refs[form].validateField(item.prop,err=>{if(err!=""){result=false;}});}if(!result)break;}returnresult;}

重置方法

//对【需要校验】的表单字段进行重置//参数同校验方法，如果是全部重置reset(form,index){this.$refs[form].fields.forEach(item=>{if(item.prop.split(".")[1]==index){item.resetField();}})}//如果需要全部重置可以直接质控表单中字段//【row】是每行传入的数据resetRow(row){row.name="";row.age="";row.phone="";}