最近遇到一个需求，可以动态添加、修改、删除表格，并且添加时要对文本框进行验证，这也算是常规需求，故整理记录，供人参考。
1.效果图
2.实现步骤
2.1HTML结构
<div class="demo">// 表单必须嵌套在表格外面，表单必须绑定 rules 、ref属性<el-form :model="ruleForm" :rules="rules" ref="contactForm"><el-table:data="ruleForm.suppContactInfoList"style="width: 100%"ref="suppContactInfoList"><el-table-columnprop="id"label="序号"width="50"type="index"align="center":index="(index) => index + 1"/><el-table-column prop="contactName" label="姓名" align="center"><template #default="scope"><span v-show="!scope.row.editFlag">{{scope.row.contactName}}</span>// 每个字段必须要动态的绑定表单的 prop、rules属性<el-form-item:prop="'suppContactInfoList.' + scope.$index + '.contactName'":rules="rules['contactName']"><el-inputv-show="scope.row.editFlag"v-model="scope.row.contactName"placeholder="请输入姓名"></el-input></el-form-item></template></el-table-column><el-table-columnprop="contactNumber"label="手机号码"align="center"><template #default="scope"><span v-show="!scope.row.editFlag">{{scope.row.contactNumber}}</span><el-form-item:prop="'suppContactInfoList.' + scope.$index + '.contactNumber'":rules="rules['contactNumber']"><el-inputv-show="scope.row.editFlag"v-model="scope.row.contactNumber"placeholder="请输入手机号码"></el-input></el-form-item></template></el-table-column><el-table-columnprop="contactEmail"label="邮箱"align="center"><template #default="scope"><span v-show="!scope.row.editFlag">{{scope.row.contactEmail}}</span><el-form-item:prop="'suppContactInfoList.' + scope.$index + '.contactEmail'":rules="rules['contactEmail']"><el-inputv-show="scope.row.editFlag"v-model="scope.row.contactEmail"placeholder="请输入邮箱"></el-input></el-form-item></template></el-table-column><el-table-column prop="position" label="职位" align="center"><template #default="scope"><span v-show="!scope.row.editFlag">{{scope.row.position}}</span><el-form-item:prop="'suppContactInfoList.' + scope.$index + '.position'":rules="rules['position']"><el-inputv-show="scope.row.editFlag"v-model="scope.row.position"placeholder="请输入职位"></el-input></el-form-item></template></el-table-column><el-table-column label="操作" width="120" align="center"><template #default="scope"><div style="display: flex"><el-buttonsize="small"type="primary"icon="CircleCheck"style="width: 90px"v-show="scope.row.editFlag"@click="submit(scope.row)">保存</el-button><el-buttonsize="small"icon="Edit"type="text"v-show="!scope.row.editFlag"@click="edit(scope.row)">修改</el-button><el-buttonsize="small"icon="Delete"type="text"v-show="!scope.row.editFlag"@click="del(scope.row.$index)">删除</el-button></div></template></el-table-column></el-table></el-form><div style="width: 100%"><el-button@click="add"size="small"style="width: 100px; margin-top: 20px; background-color: #fff">添加</el-button></div></div>**重要点：
1.添加字段校验时：格式必须写成 :prop=" 'suppContactInfoList.' + scope.$index + '.contactName' "，其中suppContactInfoList就是表格绑定的数组，contactName这个就是当前文本框绑定的字段名
2.每个字段要动态绑定表单的rules属性
2.2JS结构
data() {return {ruleForm: {suppContactInfoList: []},rules: {contactName: [{ max: 30, message: "最多输入30个字符", trigger: "change" },],contactNumber: [{ max: 30, message: "最多输入30个字符", trigger: "change" },{validator: (rule, value, callback) => {if (!value) {return callback();}var re = /^1[3-9]\d{9}$/;if (re.test(value)) {callback();} else {callback(new Error("请输入正确的手机号!"));}},trigger: "blur",},],contactEmail: [{ max: 60, message: "最多输入60个字符", trigger: "change" },{validator: (rule, value, callback) => {if (!value) {return callback();}var re = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;if (re.test(value)) {callback();} else {callback(new Error("请输入正确的邮箱!"));}},trigger: "blur",},],position: [{ max: 30, message: "最多输入30个字符", trigger: "change" },],},}},methods: {//点击添加联系人add() {this.ruleForm.suppContactInfoList.push({contactName: "",contactNumber: "",contactEmail: "",position: "",editFlag: true, // 可编辑标识isSubmit: false, // 是否点击确定标识});},// 保存新增的联系人submit(row) {this.$refs["contactForm"].validate((v) => {if (v) {if (!row.contactName && !row.contactNumber && !row.contactEmail && !row.position) return this.$message({message: "请输入内容",type: "error",});row.editFlag = false;row.isSubmit = true;}});},// 编辑联系人edit(row) {row.editFlag = true;},// 删除联系人del(index) {this.ruleForm.suppContactInfoList.splice(index, 1);},},注意：表格原始数据设为【】,效果图中看到的第一条数据是我添加后截图的，方便看出效果
3.CSS结构
.demo{.el-form-item {margin-bottom: 0;}}
