Recently, I encountered a requirement that tables can be dynamically added, modified, and deleted, and the text box must be verified when adding. This is also a regular requirement, so the records are organized for reference.
1. Rendering
2. Implementation steps
2.1 HTML structure
<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>**Important points:
1. When adding field verification: the format must be written as : prop=" 'suppContactInfoList.' + scope.$index + '.contactName' " , where suppContactInfoList is the array bound to the form, and contactName is the field bound to the current text box name
2. Each field needs to be dynamically bound to the rules attribute of the form
2.2 JS structure
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); }, },Note: The original data of the table is set to [], the first data seen in the effect diagram is a screenshot after I added it, so that it is easy to see the effect
3. CSS structure
.demo{ .el-form-item { margin-bottom: 0; } }