elementUI表单嵌套表格并对每行进行校验

elementUI表单嵌套表格并对每行进行校验

elementUI 表单嵌套表格并进行校验。

• 效果展示
• 代码链接
• 关键代码
• 完整代码

效果展示

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

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

代码链接

• gitee地址

关键代码

1. 表格数据

// 数据格式必须是【对象嵌套数组】，【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 }
  ]
},

2. 组件嵌套

1. 添加字段校验的时候，格式必须写成这样的 :prop="'list.' + scope.$index + '.name'"

   这是 elementui 规定的格式，渲染后的结果为 list.1.name

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

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

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

   
       
           
       
  

3. 校验方法

   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;
   }
   

4. 重置方法

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