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

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

效果展示

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

如图，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 }  ]},

组件嵌套

1. 添加字段校验的时候，格式必须写成这样的 :prop="'list.' + scope.$index + '.name'"
   这是 elementui 规定的格式，渲染后的结果为 list.1.name

2. 每个字段要动态绑定表单的 rules 属性

3. 如果不是以上的格式，会出错！！！

// 表单必须嵌套在表格的外面，表单必须绑定【rules】【ref】属性                              

校验方法

1. 表单的字段对象存在于 this.$refs['form'].fields 中，并且字段对象具有 prop【datas.1.name】 属性和 validateField 方法【验证 datas.1.name 能否通过校验】

2. 但是 validateField 方法需要手动创建来验证能否通过校验

3. 必须创建，否则会出错！！！

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

重置方法

// 对【需要校验】的表单字段进行重置// 参数同校验方法，如果是全部重置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 = "";}

完整代码

因为用的是在线链接，网络不稳定时页面不一定能加载出来，使用时可以更换成本地的！

                                        
                
vue表单嵌套表格逐行验证
                                                                                                                                                                                                                                                                                            

以上是"Vue elementUI表单嵌套表格并对每行进行校验的示例分析"这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注行业资讯频道！