data数据
submitForm: {id: undefined, //修改IDapp_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)}})}})}
