【Element】el-form和el-table嵌套实现表格编辑并提交表单校验

目录

一、背景

二、功能实现

2.1、el-form和el-table嵌套说明

2.2、具体代码

三、实际项目应用

3.1、增加添加与删除操作

3.2、添加和删除代码

3.4、实际效果

---

一、背景

页面需要用到表格采集用户数据，提交时进行表单校验；即表单中嵌套着表格，保存时进行表单校验

二、功能实现

2.1、el-form和el-table嵌套说明

① :model="formData" 给表单绑定数据，formData是表单的数据对象

② 表单数据对象formData中定义的tableData是表单内嵌套的表格显示数据

③ rules为表单绑定的校验规则

④ :prop="'tableData.' + scope.$index + '.name'" 绑定传入Form 组件的 model 中对应的字段name

⑤ :rules="rules.name" 绑定表单校验规则

⑥ 整个html结构是一个大表单 el-form里边嵌套的el-table，而el-table中又嵌套了表单项 el-form-item支持编辑。

备注：大多情况下prop会按照惯有思维直接写入字段，而这里是动态绑定的，另外一定要记得每项动态写入rules来进行绑定表单校验 

2.2、具体代码

三、实际项目应用

3.1、增加添加与删除操作

需求：表格增加操作项，具有添加和删除按钮，第一项无法删除，点击添加时，动态增加表格的行数，点击删除的时候，删除表格的行数据。

3.2、添加和删除代码

结构：直接添加一个表格项

methods:{
   //添加
    addTable(){
      let newArr = [
        {
          name:'',
          age:'',
          sex:''
        }
      ]
      this.formData.tableData.push(...newArr)
    },
    //删除
    delTable(i){
      this.formData.tableData.splice(i,1)
    }
}

3.3、完整代码

3.4、实际效果

 最后：