文章目录
使用场景
主要使用Vue3与Element UI,在项目开发中可能会遇到从后端取得数据,到前端去渲染菜单,从而实现动态路由与动态菜单。
一、动态菜单
1.创建动态菜单组件
代码如下:
<template>
<div>
<el-menu :unique-opened="true" :default-openeds="openList"
:default-active="'/index/' + this.$store.state.TabseditableTabsValue" :collapse-transition="true" router
class="el-menu-vertical-demo" style="width: 200px;min-height: calc(100vh );">
<el-sub-menu v-for="(menu, i) in menus" :index="i + 1" :key="i">
<template #title>
<el-icon>
<Avatar />
</el-icon>
<span>{
{ menu.authname }}</span>
</template>
<el-menu-item-group>
<el-menu-item @click="getpath(item.path, item.authname, item.name, menu.authname ,menu.path)"
:index="'/index/' + item.path" v-for="(item, index) in menu.children" :key="index">
<el-icon>
<ArrowRight />
</el-icon>{
{ item.authname }}
</el-menu-item>
</el-menu-item-group>
</el-sub-menu>
</el-menu>
</div>
</template>
<style>
.el-men