el-form中三级动态添加数据

data数据

submitForm: {
					id: undefined, //修改ID
					app_id: undefined, //IP类型
					name: '', //规则名称
					sort: undefined, //排序
					detail: [{
						keycode: 0,
						title_one: undefined, //一级标题
						desc_detail: [{
							keycode: 0,
							title_two: undefined, //二级标题
							desc: undefined, //描述
						}]
					}]
				},

view

<el-form :model="submitForm" ref="submitForm" label-width="120px" class="demo-ruleForm">

					<el-form-item label="规则名称" prop="name"
						:rules="[{ required: true, message: '请输入规则名称', trigger: 'blur' }]">
						<el-input v-model="submitForm.name" placeholder="请输入规则名称" />
					</el-form-item>

					<el-form-item label="排序" prop="sort"
						:rules="[{ required: true, message: '请输入排序', trigger: 'blur' }]">
						<el-input-number v-model="submitForm.sort" :min="0" :max="9999" label="请输入排序"
							style="width: 100%;" />
					</el-form-item>

					<!-- 一级 -->
					<el-form-item>
						<el-button type="primary" icon="el-icon-plus" @click="plusClassAHandle">新增一级标题</el-button>
					</el-form-item>
					<template v-for="(item,index) in submitForm.detail">
						<el-card class="box-card" style="margin-bottom: 12px;"
							:key="`classA-${submitForm.detail[index].keycode}`">
							<el-form-item label="一级标题" :prop="'detail.' + index + '.title_one'"
								:rules="[{ required: true, message: '请输入一级标题', trigger: 'blur' }]">
								<el-input v-model="item.title_one" placeholder="请输入一级标题" />
							</el-form-item>
							<!-- 二级 -->
							<el-form-item>
								<el-button type="primary" icon="el-icon-plus"
									@click="plusSecondaryHandle(item)">新增二级标题</el-button>
							</el-form-item>
							<template v-for="(subitem,subindex) in item.desc_detail">
								<el-card class="box-card" style="margin-bottom: 12px;"
									:key="`secondary-${submitForm.detail[index].desc_detail[subindex].keycode}`">
									<el-form-item label="二级标题"
										:prop="'detail.'+index+'.desc_detail.' + subindex + '.title_two'"
										:rules="[{ required: true, message: '请输入二级标题', trigger: 'blur' }]">
										<el-input v-model="subitem.title_two" placeholder="请输入二级标题" />
									</el-form-item>

									<el-form-item label="详情"
										:prop="'detail.'+index+'.desc_detail.' + subindex + '.desc'"
										:rules="[{ required: true, message: '请输入详情', trigger: 'blur' }]">
										<el-input v-model="subitem.desc" style="display: none;" />
										<Editor :height="300" v-model="subitem.desc"></Editor>
									</el-form-item>

									<template v-if="subindex!==0">
										<el-form-item>
											<el-button type="danger" icon="el-icon-delete" circle
												@click="removeSecondaryHandle(item.keycode,subitem)"></el-button>
										</el-form-item>
									</template>
								</el-card>
							</template>
							<template v-if="index!==0">
								<el-form-item>
									<el-button type="danger" icon="el-icon-delete" circle
										@click="removeClassAHandle(item)"></el-button>
								</el-form-item>
							</template>

						</el-card>
					</template>

				</el-form>

按钮触发事件

/**
			 * 点击-新增一级目录
			 */
			plusClassAHandle() {
				let tempItem = {
					keycode: 'A-' + Utils.getCurrentTimeStamp(),
					title_one: undefined, //一级标题
					desc_detail: [{
						keycode: 'B-' + Utils.getCurrentTimeStamp(),
						title_two: undefined, //二级标题
						desc: undefined, //描述
					}]
				}
				const data = this.submitForm['detail'];
				data.push(tempItem);
				this.submitForm['detail'] = data;
			},
			removeClassAHandle(row) {
				let data = this.submitForm['detail'];
				data.some((item, index) => {
					if (item.keycode == row.keycode) {
						this.submitForm['detail'].splice(index, 1)
					}
				})
			},
			/**
			 * 点击-新增二级目录
			 **/
			plusSecondaryHandle(row) {
				let tempItem = {
					keycode: 'B-' + Utils.getCurrentTimeStamp(),
					title_two: undefined, //二级标题
					desc: undefined, //描述
				}
				const data = this.submitForm['detail'];
				data.filter((item, index) => {
					if (item.keycode === row.keycode) {
						item.desc_detail.push(tempItem)
					}
				})
				this.submitForm['detail'] = data;
			},
			removeSecondaryHandle(keycode, row) {
				let data = this.submitForm['detail'];
				data.some((item, index) => {
					if (item.keycode == keycode) {
						item.desc_detail.some((subitem, subindex) => {
							if (subitem.keycode === row.keycode) {
								this.submitForm['detail'][index].desc_detail.splice(subindex, 1)
							}
						})
					}
				})
			}