网站建设团队技术介绍苏州网站建设制作公司
原创/朱季谦
最近通过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-tableborder: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-inputv-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-inputv-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-inputv-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' }"就可以了，当然，还可以做一些更复杂的自定义规则。
<el-table-column align="center" label="姓名"><template slot-scope="scope"><!--表格里面嵌套表单--><el-form-item:prop="scope.$index + '.name'":rules="{ required: true, message: '姓名不能为空', trigger: 'blur' }"><el-inputv-model="studentData[scope.$index].name"autocomplete="off"size="small"placeholder="姓名"></el-input></el-form-item></template></el-table-column>完成以上步骤，就可以快速写出一个基于Vue + Element ui 实现动态表单，包括新增行/删除行/动态表单验证/提交功能的逻辑。