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)
}
})
}
})
}