Vue写一个二级菜单，进行增删改

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