elementUI三级菜单，可添加子菜单，可修改可删除

<template>
  <el-row class="tac">
    <el-col :span="24">
      <el-menu
        active-text-color="#ffd04b"
        background-color="#545c64"
        class="el-menu-vertical-demo"
        default-active="2"
        text-color="#fff"
        @open="handleOpen"
        @close="handleClose"
      >
      <!-- 一级菜单 -->
        <el-sub-menu v-for="(item,index) in list" :key="index" :index="index">
          <template #title>
            <span>{{item.name}}</span>
            <button style="margin-left: 500px;" @click="addIndex('add')">添加一级菜单</button>
            <button @click="addItem(index)">添加二级菜单</button>
            <button @click="updateItem(1, item, index)">修改</button>
            <button @click="deleteItem(1, index)">删除</button>
          </template>
          <!-- 二级菜单 -->
          <el-sub-menu v-for="(item2,index2) in item.child" :key="index2" :index="index + '-' + index2">
            <template #title>
              <span>{{item2.name}}</span>
              <button style="margin-left: 500px;" @click="addItem(index, index2)">添加三级菜单</button>
              <button @click="updateItem(2, item2, index, index2)">修改</button>
              <button @click="deleteItem(2, index, index2)">删除</button>
              </template>
              <!-- 三级菜单 -->
            <el-menu-item v-for="(item3, index3) in item2.child" :key="index3" :index="index + '-' + index2 + '-' + index3">
              <span>{{item3.name}}</span>
              <button style="margin-left: 500px;" @click="updateItem(3, item3, index, index2, index3)">修改</button>
              <button @click="deleteItem(3, index, index2, index3)">删除</button>
            </el-menu-item>
          </el-sub-menu>
        </el-sub-menu>
      </el-menu>
    </el-col>
  </el-row>
  <!-- 弹窗组件 -->
  <tanchuang :form='form' @close='cliseTan' @submit='submitTan' v-if="showTan" :type='clickType'/>
</template>
<script lang="ts" setup>
//引入
import tanchuang from '../components/tanchuang.vue'
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@Element-plus/icons-vue'
import { ref,reactive } from 'vue'

//变量
let list = reactive([
  {
    name: '一级菜单',
    url: 'www.baidu.com',
    child: [
      {
        name: '二级菜单',
        url: 'www.baidu.com',
        child:[
          {
           name: '三级菜单',
            url: 'www.baidu.com',
          }
        ]
      }
    ]
  },
])
let form = reactive({
  name:'',
  url:''
})
let showTan = ref(false)
let clickIndex = ref('')
let clickIndex2 = ref('')
let clickIndex3 = ref('')
let clickType = ref('')

//函数
/**
 * 添加一级菜单
 */
function addIndex(){
  addItem(undefined, undefined)
}
/**
 * 添加子菜单
 * index 一级菜单索引
 * index2 二级菜单索引
 */
function addItem(index, index2){
  clickIndex.value = index
  clickIndex2.value = index2
  clickType.value = 'add'
  showTan.value = true
}
/**
 * 修改菜单
 * type 1一级菜单 2二级菜单 3三级菜单
 * item 选中菜单信息
 * index 一级菜单索引
 * index2 二级菜单索引
 * index3 三级菜单索引
 */
function updateItem(type, item, index, index2, index3){
  clickIndex.value = index
  clickIndex2.value = index2
  clickIndex3.value = index3
  showTan.value = false
  form.name = item.name
  form.url = item.url
  showTan.value = true
}
/**
 * 删除菜单
 * type 1一级菜单 2二级菜单 3三级菜单
 * index 一级菜单索引
 * index2 二级菜单索引
 * index3 三级菜单索引
 */
function deleteItem(type, index, index2, index3) {
  if(type == 1){//一级菜单
    list.splice(index, 1)
  }else if(type == 2){//二级菜单
    list[index].child.splice(index2, 1)
  }else{//三级菜单
    list[index].child[index2].child.splice(index3, 1)
  }
}
/**
 * 关闭弹窗
 */
function cliseTan(){
  form.name = ''
  form.url = ''
  clickType.value = ''
  showTan.value = false
}
/**
 * 弹窗确认
 */
function submitTan(name, url, type){
  if(type == 'upd'){//修改菜单
    if(clickIndex2.value == undefined){//修改一级菜单
      list[clickIndex.value].name = name
      list[clickIndex.value].url = url
    }else if(clickIndex3.value == undefined){//修改二级菜单
      list[clickIndex.value].child[clickIndex2.value].name = name
      list[clickIndex.value].child[clickIndex2.value].url = url
    }else{//修改三级菜单
      list[clickIndex.value].child[clickIndex2.value].child[clickIndex3.value].name = name
      list[clickIndex.value].child[clickIndex2.value].child[clickIndex3.value].url = url
    }
  }else if(clickIndex.value == undefined){//新建一级菜单
    list.push({
      name: name,
      url: url,
      child:[]
    })
  }else if(clickIndex2.value == undefined){//新建二级菜单
    list[clickIndex.value].child.push({
      name:name,
      url: url,
      child:[]
    })
  }else{//新建三级菜单
    list[clickIndex.value].child[clickIndex2.value].child.push({
      name:name,
      url: url,
    })
  }
  cliseTan()
}
</script>

<style scoped>
.el-menu{
  width: 1000px;
}
</style>

<template>
  <el-dialog v-model="dialogFormVisible" :title="name==''?'添加':'修改'">
    <el-form :model="form">

      <el-form-item label="菜单名称" :label-width="formLabelWidth">
        <el-input v-model="name" autocomplete="off" />
      </el-form-item>

      <el-form-item label="菜单地址" :label-width="formLabelWidth">
        <el-input v-model="url" autocomplete="off" />
      </el-form-item>

    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="submit">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from "vue"
let props = defineProps(['form','type'])
let name = ref(props.form.name)
let url = ref(props.form.url)
let type = ref(props.type == "add"?'add':'upd')
let emit = defineEmits([''])
let dialogFormVisible = ref(true)
/**
 * 关闭弹窗
 */
function close(){
  emit('close')
}
/**
 * 确认
 */
function submit(){
  emit('submit', name.value, url.value, type.value)
}
</script>

<style scoped>

</style>