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>