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

原创/朱季谦

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

简化的页面效果图如下:

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

复制代码
<template>
  <div >
        <div>
          <div>
            <el-button  size="small"  @click="addRow">新增</el-button>
          </div>
          <!--设置的表单-->
          <el-form :model="studentData" ref="data" label-width="auto">
          <el-table
            border
            :header-cell-style="{ 'text-align': 'center' }"
            :cell-style="{ 'text-align': 'center' }"
            :data="studentData"
            ref="table"
            style="width: 100%"
          >

            <el-table-column align="center"   label="姓名">
              <template slot-scope="scope">
              <!--表格里面嵌套表单-->
                <el-form-item
                  :prop="scope.$index + '.name'"
                  :rules="{ required: true, message: '姓名不能为空', trigger: 'blur' }"
                >
                <el-input
                  v-model="studentData[scope.$index].name"
                  autocomplete="off"
                  size="small"
                  placeholder="姓名"
                ></el-input>
                </el-form-item>
              </template>
            </el-table-column>

            <el-table-column align="center"  label="年龄">
              <template slot-scope="scope">
                  <el-form-item
                    :prop="scope.$index + '.age'"
                    :rules="{ required: true, message: '年龄不能为空', trigger: 'blur' }"
                  >
                <el-input
                  v-model="studentData[scope.$index].age"
                  autocomplete="off"
                  size="small"
                  type='number'
                  placeholder="收款方开户行号"
                ></el-input>
                  </el-form-item>
              </template>
            </el-table-column>

            <el-table-column align="center"  label="性别">
              <template slot-scope="scope">
                <el-form-item
                  :prop="scope.$index + '.sex'"
                  :rules="{ required: true, message: '性别不能为空', trigger: 'blur' }"
                >
                <el-input
                  v-model="studentData[scope.$index].sex"
                  autocomplete="off"
                  size="small"
                  placeholder="性别"
                ></el-input>
                </el-form-item>
              </template>
            </el-table-column>

            <el-table-column fixed="right" label="操作" width="100">
              <template slot-scope="scope">
                <el-button
                  @click="handleDeleteRow(studentData[scope.$index])"
                  type="text"
                  size="small"
                >删除</el-button
                >
              </template>
            </el-table-column>
            
          </el-table>
          </el-form>
        </div>
        
        <div slot="footer" class="dialog-footer" style="margin-bottom: 10px">
          <el-button size="mini"  @click="submit">提交</el-button>
          <el-button size="mini" @click="resetForm()">重置</el-button>
        </div>
  </div>
</template>

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

复制代码
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 < datas.length; i++){
      if (datas[i].key == row.key){
        datas.splice(i,1);
      }
    }
  },

  /**
   * 提交
   */
  submit() {
    this.$refs["data"].validate(valid => {
      //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 < datas.length; i++){
      datas[i].name='';
      datas[i].age='';
      datas[i].sex='';
    }
  },
}

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

javascript 复制代码
<el-table-column align="center"   label="姓名">
          <template slot-scope="scope">
          <!--表格里面嵌套表单-->
            <el-form-item
              :prop="scope.$index + '.name'"
              :rules="{ required: true, message: '姓名不能为空', trigger: 'blur' }"
            >
            <el-input
              v-model="studentData[scope.$index].name"
              autocomplete="off"
              size="small"
              placeholder="姓名"
            ></el-input>
            </el-form-item>
          </template>
        </el-table-column>

完成以上步骤,就可以快速写出一个基于Vue + Element ui 实现动态表单,包括新增行/删除行/动态表单验证/提交功能的逻辑。

相关推荐
武天几秒前
Vue常用的修饰符有哪些?分别有什么应用场景?
vue.js
小岛前端3 分钟前
🔥Vue3 移动端组件精选!满足各种场景!
前端·vue.js·微信小程序
武天4 分钟前
vue 中怎么实现样式隔离?
vue.js
武天5 分钟前
Vue2动态给 data添加一个新的属性时会发生什么
vue.js
武天6 分钟前
说下前端状态管理库pinia
vue.js
武天12 分钟前
手写 vue 2的双向绑定
vue.js
武天15 分钟前
vue 的双向绑定原理
vue.js
武天15 分钟前
手写 vue3 的双向绑定
vue.js
XXX-X-XXJ1 小时前
Vue Router完全指南 —— 从基础配置到权限控制
前端·javascript·vue.js
云和数据.ChenGuang1 小时前
vue钩子函数调用问题
前端·javascript·vue.js