vue3.0 + element Plus实现menu菜单上进行删除和修改

1. 根据你的需求，引入element中的菜单

侧边栏的名称是后端提供的，所以在这里我使用了v-for遍历每一个侧边栏的名称，i.name来显示。

 <el-menu
    :default-active="router.currentRoute.value.name"
    class="el-menu-vertical-demo"
    :default-openeds="currentProjectId"
  >
    <div v-for="i in projectList" :key="i.id">
      <el-sub-menu :index="i.id">
        <template #title>
          <span>{
   
   { i.name }}</span>
        <el-menu-item>
          <router-link
            active-class="checkedMenu"
            :to="{
              name: 'projectGroup:alg',
              params: { id: i.id, name: i.name },
            }"
            >算法</router-link>
        </el-menu-item>
        <el-menu-item
          ><router-link
            active-class="checkedMenu"
            :to="{
              name: 'projectGroup:sample',
              params: { id: i.id, name: i.name },
            }"
            >样本
          </router-link>
        </el-menu-item>
      </el-sub-menu>
    </div>
  </el-menu>

2. 需要在侧边栏上添加操作，所以这时需要引入 element中的Popover组件

只需要在<el-sub-menu>的<template>中引入Popover就好！

我这里是要对侧边栏进行重命名和删除操作，所以这里插入了<el-button>来进行操作

<!--侧边栏上鼠标右键点击：contextmenu，显示气泡卡片内容--> 
 <template #title>
    <el-popover
      ref="popover"
      :width="200"
      placement="right"
      trigger="hover"
     >
      <div style="text-align: right; margin: 0">
        <el-button
          @click="onShowEditDialog(i)"
          type="primary"
          size="small"
          :icon="Edit"
          plain
        >重命名</el-button>
        <el-button
          @click="onRemoveProject(i)"
          type="danger"
          size="small"
          :icon="Delete"
          plain
        >删除</el-button>
      </div>
   <template #reference>
     <el-icon><MoreFilled /></el-icon>
   </template>
  </el-popover>
</template>

3. 样式如下：