element ui form循环嵌套表单 及嵌套表单的验证方法（校验）
首先看看成果
表单一级、二级嵌套的增加、删除
一级、二级嵌套 的 表单的验证
下图添加了样式区分一级二级嵌套，与上图是一样的
知识点
一级嵌套
循环：<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-form
ref="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-input
v-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-input
v-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-item
label="基本名称"
:prop="`producte[${index}].name`"
:rules="{
required: true,
message: '基本名称不能为空',
trigger: 'blur',
}"
>
<el-input
v-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-item
label="规格"
:prop="`producte[${index}].rules[${index1}].ruleName`"
:rules="{
required: true,
message: '域名不能为空',
trigger: 'blur',
}"
>
<el-input
v-model="item1.ruleName"
style="width: 100px"
></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-col :span="10">
<el-form-item
label="价格"
:prop="`producte[${index}].rules[${index1}].isFixed`"
:rules="{
required: true,
message: '价格不能为空',
trigger: 'change',
}"
>
<el-select
v-model="item1.isFixed"
placeholder="请选择"
>
<el-option
v-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-button
type="warning"
size="mini"
@click="addRule(index, index1)"
v-if="index1 == 0"
>添加规则</el-button
>
<el-button
type="warning"
size="mini"
@click="deleteRule(index, index1)"
v-else
>删除规则</el-button
>
</el-col>
</el-row>
</div>
<el-row>
<el-button
size="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>