表单嵌套表格,实现表格行内表单的校验

随着element ui的使用,很多业务场景的实现,往往需要多个组件嵌套使用来实现;

前段时间,为了实现表格中的每一行的数据进行校验的同时实现添加多个的需求;

初步想法

在每一行对应属性中嵌套表单实现逐个校验;但是由于数据量大大;一行需要展示的属性很多;以至于不得不使用表格的fixed属性,这样导致的问题:添加多条数据点击确认时,控制台有警告;但是页面上需要展示的提示信息,始终没有显示;查阅很多资料,有关fixed引起的错位等等;尝试很多,始终没有找到解决方式,有相关经验的,还请赐教?

替代方式

和之前不同的,这次使用表单嵌套表格的形式

要点

1.表格数据datas必须是某对象（以form为例）的一个属性

  form: {
    datas: [
      { id: 1, name: "ll", age:20 },
      { id: 2, name: "zz", age:32 },
    ],
  },
 

2.每个字段要动态绑定表单的prop属性（以name字段为例）

<el-form :model="form" :rules="rules" ref="form">
   <el-form-item :prop="'datas.' scope.$index '.name'" :rules='rules.name'>
</el-form>

注意::prop="'datas.' scope.$index '.name'"，这是elementui规定的格式，渲染后的结果为’datas.1.name’。所以必须结合第1点才能实现，否则提示出错！

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

<el-form-item :prop="‘datas.’ scope.$index ‘.name’" :rules='rules.name'>

4.针对某一行的所有字段进行校验

4.1每一行对应有添加,编辑,重置等操作

表单的字段对象存在this.$refs[‘form’].fields里面，并且字段对象具有prop属性（’datas.1.name’）和validateField方法（验证’datas.1.name’能否通过校验）。

那么我们创建一个函数validateField，来判断第index行的所有字段能否通过校验

1.  
   //对部分表单字段进行校验
2.  
   validateField(form,index){
3.  
   let result = true;
4.  
   for (let item of this.$refs[form].fields) {
5.  
   if(item.prop.split(".")[1] == index){
6.  
   this.$refs[form].validateField(item.prop,(error)=>{
7.  
   if(error!=""){
8.  
   result = false;
9.  
   }
10.  
    });
11.  
    }
12.  
    if(!result) break;
13.  
    }
14.  
    return result;
15.  
    },

4.2 重置

表单的字段对象存在resetField方法来重置数据，那么我们创建一个函数 resetField，来重置第index行的所有字段

1.  
   //对部分表单字段进行重置
2.  
   resetField(form,index){
3.  
   this.$refs[form].fields.forEach(item=>{
4.  
   if(item.prop.split(".")[1] == index){
5.  
   item.resetField();
6.  
   }
7.  
   })
8.  
   },

4.3 添加多个时

只需要对整个表单进行校验即可实现多行校验的呈现结果,调用validate方法

1.  
   let flag = null
2.  
   this.$refs.form.validate(valid => {
3.  
   if (valid) {
4.  
   flag = valid
5.  
   } else {
6.  
   console.log('error submit!!')
7.  
   return false
8.  
   }
9.  
   })
10.  
    //flag满足条件的话,进行调用接口的操作

5.代码参考

1.  
   <el-form :model="form" :rules="rules" ref="form">
2.  
   <el-table :data="form.datas" highlight-current-row style="width: 100%">
3.  
   <el-table-column prop="id" label="序号" width="60"></el-table-column>
4.  
    
5.  
   <el-table-column prop="name" label="姓名">
6.  
   <template slot-scope="scope">
7.  
   <template v-if="scope.row.action == 'view'">
8.  
   {{scope.row.name}}
9.  
   </template>
10.  
    <template v-else>
11.  
    <el-form-item :prop="'datas.' scope.$index '.name'" :rules='rules.name'>
12.  
    <el-input size="mini" v-model.trim="scope.row.name" style="width:120px;">
13.  
    </el-input>
14.  
    </el-form-item>
15.  
    </template>
16.  
    </template>
17.  
    </el-table-column>
18.  
    </el-table>
19.  
    </form>
20.  
     
21.  
    //表单验证规则
22.  
    rules: {
23.  
    name: [{
24.  
    type: 'string',
25.  
    required: true,
26.  
    trigger: 'blur',
27.  
    message: '请输入姓名',
28.  
    }],
29.  
    age: [{
30.  
    type: 'number',
31.  
    required: true,
32.  
    trigger: 'blur',
33.  
    message: '请输入年龄',
34.  
    },
35.  
    {
36.  
    type: 'number',
37.  
    trigger: 'blur',
38.  
    min: 0,
39.  
    max: 120,
40.  
    message: '年龄最小0，最大120',
41.  
    }],
42.  
    }
43.  
    }
44.  
    },

6.场景实现

这篇好文章是转载于：学新通技术网