最近、テーブルを動的に追加、変更、削除でき、追加時にテキスト ボックスを確認する必要があるという要件に遭遇しましたが、これも定期的な要件なので、参照用にレコードを整理します。
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; } }