elementUI中的table动态表单记录

form表单与table一起使用

之前一直以为form表单是单独使用，现在联动起来发现只是套了一层外壳，并不是很麻烦的事情

form的单独使用

  
    
  
  
    
  
  
    
  
  
    提交
    重置
  

form与table的联合

在table的column中使用solot 将form-item放入。需要注意的还是数据格式与rules

form内使用的是input输入框，它所绑定的值当前行数据的属性  原来的写法是form表单绑定form后 使用form.xxx进行绑定。现在采用的是table，绑定值变成了scope.row.xxx.

因为我写的是动态添加表格数据，所以prop采用index拼接的方式

数据格式

form{
    tableData:[],
    rules:{}
   }

el-table中的index

Table-column Attributes

参数	说明	类型	可选值	默认值
type	对应列的类型。如果设置了 selection 则显示多选框；如果设置了 index 则显示该行的索引（从 1 开始计算）；如果设置了 expand 则显示为一个可展开的按钮	string	selection/index/expand	—
index	如果设置了 type=index，可以通过传递 index 属性来自定义索引	number, Function(index)	-

 // 将数字转换为A-Z 一直到AZ-ZZ的转换方法
    indexMethod(number) {
      var ordA = "A".charCodeAt(0);
      var ordZ = "Z".charCodeAt(0);
      var len = ordZ - ordA + 1;
      var s = "";
      while (number >= 0) {
        s = String.fromCharCode((number % len) + ordA) + s;
        number = Math.floor(number / len) - 1;
      }
      return s;
    },

可增删表格数据

点击当前行时候在当前行后面新增一条数据，点击当前行删除当前行，点击在最后添加一行

 // 增加一行
    addRow() {
      const row = {
        title: "",
      };
      this.form.tableData.push(row);
      // console.log(row);
    },
    // 删除指定行
    delRow(index) {
      this.form.tableData.splice(index, 1);
    },
    // 指定位置插入行
    addRowIndex(index) {
          const row = {
            title: "",
            this.form.tableData.splice(index + 1, 0, row);
        
      });
    },

表单校验

表单校验与原来的方式是一样的，需要将rules写在form表单中

因为后续进行动态添加表单，prop采用拼接index的方式，rules需要写全属性

但是存在一个问题，点击产生新表单后，例如index为 3,4,5的。点击验证后3表单存在错误提示，直接删除数据3，数据4的验证就会出现原来3号数据的错误提示。不会进行重新验证。

这里我采用的办法是在新增时候岁所有填入数据进行验证，验证成功后才可进行新增，删除行数据是直接进行删除。将错误信息也进行了删除不回影响数据显示。

如果有更好的方式希望能够提醒我下。我这没有使用el-table的新增。还是比较麻烦的写法