问题形容
在我的项目开发中，咱们常常会遇到表单保留的性能，在表单保留前，经常须要做表单必填项的校验，校验通过当前才去发申请保留表单数据。
然而，这个表单如果是动静的，即：能够新增雷同的表单。比方这个表单有输入框和下拉框须要校验，点击增加表格按钮，再新增一个雷同的表单，同样新的这个表单对应的输入框和下拉框也须要校验。
本文记录一下对应代码写法思路，咱们先看一下效果图：
效果图
代码思路
- 表单的主数据是要写成对象模式 :model="ruleForm" 不过既然是要动静的，必定是要循环呢，所以，能够写成这样：
ruleForm: { // 动静循环项数组 formItemArr: [ { name: "", gender: "", }, ], },- 点击增加表格的时候，就能够间接push对应项就行啦，即，这样：
// 增加一个表格 addForm() { let itemObj = { name: "", gender: "", }; this.ruleForm.formItemArr.push(itemObj); },- 重点来喽，因为是循环的，所以prop也要变成动静的了，要拼接上index，就变成依据索引去找对应的校验项了，即为：
:prop="'formItemArr.' + index + '.name'"，这样的话，就变成了：prop="formItemArr.0.name"、prop="formItemArr.1.name"、prop="formItemArr.2.name" ...这样的话，就能够关照到每一项中的每一个绑定的值了，校验就不会漏掉
- 校验规定写成内联就能够触发校验函数
this.$refs["ruleForm"].validate((val) => {})了
<el-form-item label="姓名" :prop="'formItemArr.' + index + '.name'" :rules="{ required: true, message: '请填写', trigger: 'blur', }" > ......残缺代码
演示的话，大家间接复制粘贴即可
<template> <div class="box"> <el-button @click="addForm" size="mini" type="primary" plain >增加表格</el-button > <el-button @click="saveForm" size="mini" type="primary" plain >保留表格</el-button > <br /> <br /> <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="formform" > <div class="formformItemClass" v-for="(item, index) in ruleForm.formItemArr" :key="index" > <el-form-item label="姓名" :prop="'formItemArr.' + index + '.name'" :rules="{ required: true, message: '请填写', trigger: 'blur', }" > <el-input size="mini" v-model.trim="item.name" placeholder="请填写" style="width: 200px" ></el-input> </el-form-item> <el-form-item label="性别" :prop="'formItemArr.' + index + '.gender'" :rules="{ required: true, message: '请抉择', trigger: 'change', }" > <el-select clearable size="mini" v-model="item.gender" placeholder="请抉择" > <el-option label="男" value="男"></el-option> <el-option label="女" value="女"></el-option> </el-select> </el-form-item> </div> </el-form> </div></template><script>export default { data() { return { ruleForm: { // 动静循环项数组 formItemArr: [ { name: "", gender: "", }, ], }, }; }, methods: { // 增加一个表格 addForm() { let itemObj = { name: "", gender: "", }; this.ruleForm.formItemArr.push(itemObj); }, // 保留表格 saveForm() { this.$refs["ruleForm"].validate((val) => { if (val) { console.log("符合要求，保留胜利", this.ruleForm); } else { console.log("error submit!!"); return false; } }); }, },};</script><style lang="less" scoped>.box { width: 100%; height: 100%; box-sizing: border-box; padding: 24px; .formform { width: 360px; .formformItemClass { padding-top: 24px; border: 2px dashed #ccc; margin-bottom: 18px; } }}</style>好忘性不如烂笔头，记录一下吧 ^_^