<template>
<div>
<div class="menu">
<div class="first" v-for="(item, index) in menu" :key="index">
<span>{{ item.title }}</span>
<div class="second" v-for="(items, i) in item.children" :key="i">
{{ items.title }}
</div>
</div>
</div>
<div class="moridy btn">
一级菜单:<input type="text" v-model="menu1" /> 二级菜单:<input
type="text"
v-model="menu2"
/>
修改一级内容:<input type="text" v-model="modVal1" /> 修改二级内容:<input
type="text"
v-model="modVal2"
/>
<br /><br />
<button @click="addSubmit()">增加</button>
<button @click="modify('0')">删除</button>
<button @click="modify('1')">重命名</button>
<button @click="onCanel()">取消</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
edit: false,
index2: "",
len2: "",
menu1: "",
menu2: "",
modVal1: "",
modVal2: "",
menu: [
{
id: "001",
title: "一级菜单",
children: [
{
id: "010",
title: "一一",
},
{
id: "011",
title: "一二",
},
],
},
{
id: "002",
title: "兄弟菜单",
children: [
{
id: "010",
title: "二一",
},
{
id: "011",
title: "二二",
},
],
},
],
};
},
methods: {
// 新增
addSubmit() {
let falg1 = false;
let falg2 = false;
let len2;
if (this.menu1) {
this.menu.map((item) => {
if (this.menu1 === item.title) {
let a = item.title.lastIndexOf(this.menu1);
if (a === 0) {
falg1 = true;
}
}
});
if (this.menu1 && !falg1) {
this.menu.push({
id: "00" + (this.menu.length + 1),
title: this.menu1,
children: [],
});
}
}
if (this.menu1 && this.menu2) {
this.menu.map((item, index) => {
if (this.menu1 === item.title) {
this.index2 = index;
}
if (item.children) {
len2 = item.children.length;
item.children.map((child) => {
if (this.menu2 === child.title) {
let b = child.title.lastIndexOf(this.menu2);
if (b === 0) {
falg2 = true;
}
}
});
}
});
if (this.menu1 && this.menu2 && !falg2) {
let source = this.menu[this.index2].children;
source.push({
id: "01" + (len2 + 1),
title: this.menu2,
});
}
}
this.menu1 = "";
this.menu2 = "";
},
// 删除-0 修改-1
modify(type) {
if (this.menu1) {
if (this.menu2) {
this.menu.map((item) => {
if (item.children.length) {
item.children.map((child, index) => {
if (child.title === this.menu2) {
if (type === "0") {
item.children.splice(index, 1);
} else {
if(this.modVal2) {
child.title = this.modVal2;
}
}
}
});
}
});
} else {
this.menu.map((item, index) => {
if (item.title === this.menu1) {
if (type === "0") {
this.menu.splice(index, 1);
} else {
if (this.modVal1) {
item.title = this.modVal1;
}
}
}
});
}
}
this.menu1 = "";
this.menu2 = "";
this.modVal1 = "";
this.modVal1 = "";
},
// 取消
onCanel() {
this.menu1 = "";
this.menu2 = "";
this.modVal1 = "";
this.modVal1 = "";
},
},
};
</script>
<style>
.menu {
display: flex;
justify-content: start;
margin-bottom: 550px;
}
.first {
width: 150px;
height: 50px;
line-height: 50px;
text-align: center;
background-color: rgb(252, 200, 103);
border-right: 1px solid #ddd;
}
.second {
padding: 5px 0;
box-sizing: border-box;
border-bottom: 1px solid #ddd;
background-color: #ddd;
}
.btn button {
padding: 10px 15px;
box-sizing: border-box;
margin: 5px;
}
.moridy > input {
height: 30px;
padding: 0 10px;
}
</style>