最近遇到一个需求,可以动态添加、修改、删除表格,并且添加时要对文本框进行验证,这也算是常规需求,故整理记录,供人参考。
1.效果图
2.实现步骤
2.1 HTML结构
<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-column prop="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-input v-show="scope.row.editFlag" v-model="scope.row.contactName" placeholder="请输入姓名" > </el-input> </el-form-item> </template> </el-table-column> <el-table-column prop="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-input v-show="scope.row.editFlag" v-model="scope.row.contactNumber" placeholder="请输入手机号码" > </el-input> </el-form-item> </template> </el-table-column> <el-table-column prop="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-input v-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-input v-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-button size="small" type="primary" icon="CircleCheck" style="width: 90px" v-show="scope.row.editFlag" @click="submit(scope.row)" >保存 </el-button> <el-button size="small" icon="Edit" type="text" v-show="!scope.row.editFlag" @click="edit(scope.row)" > 修改 </el-button> <el-button size="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.2 JS结构
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; } }