动态增减表单项也是比较常用的，除了在 Form 组件上一次性传递所有的验证规则外还可以在单个的表单域上传递属性的验证规则，在一些需求下面很灵活方便。下面来看看怎么样实现动态增加，验证，删除表单项。直接上代码

 <template><div><el-buttonv-if="openint === false"icon="el-icon-thumb"type="primary"plain@click="Open">点击打开动态表单</el-button><div v-else class="box"><el-form :model="data" ref="data" label-width="100px"><div class="box_one"><divclass="box_two"v-for="(item, index) in data.private_data":key="item.key"><div><el-form-itemlabel="姓名":prop="'private_data.' + index + '.name'":rules="{required: true,message: '请输入姓名',trigger: ['blur', 'change'],}"><el-inputclass="inputciu"v-model="item.name"placeholder="请输入"clearable></el-input></el-form-item><el-form-itemlabel="年龄":prop="'private_data.' + index + '.age'":rules="{required: true,message: '请输入年龄',trigger: ['blur', 'change'],}"><el-inputclass="inputciu"v-model="item.age"placeholder="请输入"clearable></el-input></el-form-item><el-form-itemlabel="身高":prop="'private_data.' + index + '.height'":rules="{required: true,message: '请输入身高',trigger: ['blur', 'change'],}"><el-inputclass="inputciu"v-model="item.height"placeholder="请输入"clearable></el-input></el-form-item><el-form-itemlabel="班级":prop="'private_data.' + index + '.shift'":rules="{required: true,message: '请选择班级',trigger: 'change',}"><el-selectclass="inputciu"v-model="item.shift"placeholder="请选择"clearable><el-option label="高三一班" value="1"></el-option><el-option label="高三二班" value="2"></el-option><el-option label="高三三班" value="3"></el-option><el-option label="高三四班" value="4"></el-option><el-option label="高三五班" value="5"></el-option></el-select></el-form-item></div><iv-if="data.private_data.length > 1"class="box_three el-icon-delete"@click="removeDomain(item)"></i></div></div><el-form-item class="box_four" label-width="40px"><span class="box_five">现在有(<span>{{ quantity || "1" }}</span>)个最多45个</span><el-buttonicon="el-icon-plus"type="primary"plain@click="addonecommodity">新增一个选择</el-button><el-buttonicon="el-icon-check"type="primary"plain@click="submit('data')">提交</el-button></el-form-item></el-form></div></div>
</template>
<script>
export default {data() {return {openint: false,quantity: "",data: {private_data: [{age: "",name: "",height: "",shift: "",},],},};},methods: {// 打开Open() {this.openint = true;},// 提交submit(e) {this.$refs[e].validate((valid) => {if (valid) {console.log(this.data.private_data,'动态增加表单的数据');(this.data = {private_data: [{age: "",name: "",height: "",shift: "",},],}),(this.quantity = this.data.private_data.length);this.openint = false;}});},// 新增一个商品addonecommodity() {if (this.data.private_data.length <= 44) {this.quantity = this.data.private_data.length + 1;this.data.private_data.push({age: "",name: "",height: "",shift: "",});} else {this.$message.warning("最多45个额~");}},// 删除 新增一个商品removeDomain(item) {const index = this.data.private_data.indexOf(item);if (index !== -1) {this.quantity = this.data.private_data.length - 1;this.data.private_data.splice(index, 1);}},},
};
</script>
<style scoped lang="scss">
.box {width: 100%;display: flex;align-items: center;justify-content: center;.box_one {max-height: 500px;overflow-y: auto;.box_two {width: 500px;padding: 10px 0 0 0;border-radius: 10px;margin: 0 10px 10px 0;background: #ececec;display: flex;align-items: center;.inputciu {width: 330px;}.box_three {font-size: 20px;margin: 0 0 15px 20px;cursor: pointer;}}}/* 设置滚动条的样式 */::-webkit-scrollbar {width: 3px;border-radius: 10px;background-color: #ececec;}/* 滚动槽 */::-webkit-scrollbar-track {border-radius: 10px;}/* 滚动条滑块 */::-webkit-scrollbar-thumb {border-radius: 10px;background: #b6b4b4;}.box_four {margin-top: 10px;.box_five {margin-right: 10px;span {color: red;}}}
}
</style>

看完如果觉得对你有所帮助请作者大大一个关注吧！！！