Vue + Element ui 实现动态表单，包括新增行/删除行/动态表单验证/提交功能

总结/朱季谦

最近通过Vue + Element ui实现了动态表单功能，该功能还包括了动态表单新增行、删除行、动态表单验证、动态表单提交功能，趁热打铁，将开发心得记录下来，方便以后再遇到类似功能时，直接拿来应用。

简化的页面效果图如下：

最开始，我是用了纯粹的表格形式，后来发现，这种形式在提交的时候，不好对每个输入框做校验，若是表单形式话，就可以直接通过rule设置每个输入框的验证，因此，我就在表格里面嵌套了表单。注意一点是，el-form-item里的 :prop=”scope.$index + ‘.name'”需要对应el-input的 v-model=”studentData[scope.$index].name”，两者都是同一个字段值。

  

        

          

            新增
          
          
          
          

            
              
              
                
                
                
              
            

            
              
                  
                
                  
              
            

            
              
                
                
                
              
            

            
              
                删除
              
            
            
          
          
        
        
        

          提交
          重置
        
  

定义一个存储动态表格数据的数组变量

export default {
  data() {
    return {
      studentData:[],
    };
  },
  ......
}

在methods方法里增加相关方法，分别是新增行、删除行、提交——

methods:{

  /**
   * 新增行
   */
  addRow() {
    let index = this.studentData.length ;
    this.studentData.push({
      key: index,
      name:'',
      age:'',
      sex:'',
    });
  },

  /**
   * 删除行
   * @param row
   */
  handleDeleteRow(row){
    let datas = this.studentData;
    for (var i = 0; i  {
      //valid为true，表示表单都已经验证通过，若为false，说明存在表单验证失败
        if (valid) {
          save(this.studentData).then(response => {
            this.$message({
              message: '提交成功',
              type: 'success'
            });
          });
        }
    });
  },

  /**
   * 重置
   */
  resetForm() {
    let datas = this.studentData;
    for (var i = 0; i 

设置表单验证规则，可统一在rules设置，也可以在每一输入框单独设置，我这里是单独在每一个输入框里设置，即:rules=”{ required: true, message: ‘姓名不能为空’, trigger: ‘blur’ }”就可以了，当然，还可以做一些更复杂的自定义规则。

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net
机房租用，北京机房租用，IDC机房托管， http://www.fwqtg.net

相关推荐: 在命令行按下tab键之后, 发生了生么?

1. 引言 2. complete命令 3. 自定义补全列表 4. 动态补全列表 5. compgen命令 6. 别名的自动补全 7. 补全规则永久生效 8. 自动加载 9. 参考 1. 引言 当我们输入ls 再按下TAB时, 会自动列出当前路径下所有的文件;…