首先看看成果

表单一级、二级嵌套的增加、删除

一级、二级嵌套 的 表单的验证

知识点

一级嵌套

循环：<div v-for="(item, index) in form.producte" :key="index">prop绑定：:prop="`producte[${index}].name`"规则绑定：:rules="{required: true,message: '基本名称不能为空',trigger: 'blur',}"

二级嵌套

循环：<div v-for="(item1, index1) in item.rules" :key="index1"> //item为上面一级中的item，下面的producte同理prop绑定：:prop="`producte[${index}].rules[${index1}].ruleName`" 规则绑定：:rules="{required: true,message: '域名不能为空',trigger: 'blur',}"

代码展示

直接复制到你的 vue 中就可以展示和进行测试

有问题的话可以提问（数据都是随便写的）

<template><div class="form"><el-row><el-col :span="12"><el-card class="box-card"><div slot="header" class="clearfix"><span>卡片名称</span><!-- 表单 --><el-formref="form":model="form":rules="rules"label-width="80px"label-position="top"size="mini"><el-row><el-col :span="12"><el-form-item label="活动名称" prop="baseInfo.username"><el-inputv-model="form.baseInfo.username"style="width: 200px"></el-input></el-form-item></el-col><el-col :span="12"><el-form-item label="活动密码" prop="baseInfo.pasword"><el-inputv-model="form.baseInfo.pasword"style="width: 200px"></el-input></el-form-item></el-col></el-row><div v-for="(item, index) in form.producte" :key="index"><el-divider content-position="left"></el-divider><el-row><el-form-itemlabel="基本名称":prop="`producte[${index}].name`":rules="{required: true,message: '基本名称不能为空',trigger: 'blur',}"><el-inputv-model="item.name"style="width: 200px"></el-input></el-form-item></el-row><div v-for="(item1, index1) in item.rules" :key="index1"><el-row><el-col :span="5"><el-form-itemlabel="规格":prop="`producte[${index}].rules[${index1}].ruleName`":rules="{required: true,message: '域名不能为空',trigger: 'blur',}"><el-inputv-model="item1.ruleName"style="width: 100px"></el-input></el-form-item></el-col><el-col :span="8"><el-col :span="10"><el-form-itemlabel="价格":prop="`producte[${index}].rules[${index1}].isFixed`":rules="{required: true,message: '价格不能为空',trigger: 'change',}"><el-selectv-model="item1.isFixed"placeholder="请选择"><el-optionv-for="item1 in options":key="item1.value":label="item1.label":value="item1.value"></el-option></el-select></el-form-item></el-col><el-col :span="10"><el-form-item:prop="`producte[${index}].rules[${index1}].price`":rules="{required: true,message: '价格不能为空',trigger: 'blur',}"><div style="height: 38px"></div><el-input v-model="item1.price"><template slot="append">↑</template></el-input></el-form-item></el-col></el-col><el-col :span="4"><el-form-item:prop="`producte[${index}].rules[${index1}].other`":rules="{required: true,message: '其他不能为空',trigger: 'blur',}"><div style="height: 38px"></div><el-input v-model="item1.other"><template slot="append">↑</template></el-input></el-form-item></el-col><el-col :span="5"><div style="height: 38px"></div><el-buttontype="warning"size="mini"@click="addRule(index, index1)"v-if="index1 == 0">添加规则</el-button><el-buttontype="warning"size="mini"@click="deleteRule(index, index1)"v-else>删除规则</el-button></el-col></el-row></div><el-row><el-buttonsize="mini"@click="createTable(index)"v-if="index == form.producte.length - 1">创建新表</el-button><el-button size="mini" @click="deleteTable(index)" v-else>删除表</el-button></el-row><el-divider content-position="left"></el-divider></div><el-form-item><el-button type="primary" @click="submitForm('form')">立即创建</el-button><el-button @click="resetForm('form')">重置</el-button></el-form-item></el-form></div></el-card></el-col></el-row></div></template><script>export default {data() {return {options: [{value: 1,label: "固定",},{value: 0,label: "非固定",},],value: "",form: {baseInfo: {username: "",pasword: "",},producte: [{name: "",rules: [{ruleName: null,isFixed: null,price: null,other: null,},],},],},rules: {"baseInfo.username": [{required: true, message: "请输入活动名称", trigger: "blur" },],"baseInfo.pasword": [{required: true, message: "请选择活动区域", trigger: "blur" },],date1: [{type: "date",required: true,message: "请选择日期",trigger: "change",},],date2: [{type: "date",required: true,message: "请选择时间",trigger: "change",},],type: [{type: "array",required: true,message: "请至少选择一个活动性质",trigger: "change",},],resource: [{required: true, message: "请选择活动资源", trigger: "change" },],desc: [{required: true, message: "请填写活动形式", trigger: "blur" }],},};},methods: {//删除规则deleteRule(index, index1) {this.form.producte[index].rules.splice(index1, 1);},//添加规则addRule(index, index1) {console.log(index, index1);let producteItem = {name: "",ruleName: null,isFixed: null,price: null,other: null,};this.form.producte[index]["rules"].push(producteItem);},//创建新表createTable(index) {let newTable = {name: "",rules: [{ruleName: null,isFixed: null,price: null,other: null,},],};this.form.producte.push(newTable);},//删除信表deleteTable(index) {this.form.producte.splice(index, 1);},//提交表单验证submitForm(formName) {this.$refs[formName].validate((valid) => {if (valid) {alert("submit!");} else {console.log("error submit!!");return false;}});},//重置表单resetForm(formName) {this.$refs[formName].resetFields();},},};</script><style scoped></style>