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表单嵌套表格并对每行进行校验的文章就介绍到这了,更多相关elementUI表单嵌套表格内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！