item.index = parent_index + '-' + (index + 1) } else { item.index = index + 1 + '' } if (item.children && item.children.length > 0) { const children = init_menu_list(item.children, item.index) item.children = children } else { delete item.children } return item }) } 1...
<el-menu-item index="2-1"@click="show(2)":class="index===2? 'active':''">查找用户</el-menu-item> <el-menu-item index="2-2"@click="show(3)":class="index===3? 'active':''">新增用户</el-menu-item> <el-menu-item index="2-3"@click='show(4)':class="index===4? '...
-- 二级导航 --><templatev-if="item.children"><el-menu-item-groupv-for="val in item.children":key="val.meta.key"><templatev-if="val.children"><el-sub-menuv-for="ele in val.children":key="ele.meta.key":index="ele.path"><template #title><span>{{val.meta.title}}</span></t...
这里el-menu添加router属性的意思就是让我们的菜单点击的时候启用路由功能,el-menu-item的index属性配置要和我们的路由的path一一对应 再一方面就是我们的主内容区域要添加路由视图,这样路由切换的时候页面会显示在这个区域里 <el-mainclass="content"><!-- 放置表格 --><router-view/></el-main> 4 首页的完整...
vue3.x+element-plus 实现动态路由菜单功能 废话不多说直接上代码: 首先一般的后台管理都是有登录页面的 我们在登陆页面实现 具体的 接口调用 获取 动态菜单和权限 这里我们就简单mock一下 上代码: vue3.x-admin\src\mock\menu.json [ { "path": "/home",...
这里el-menu添加router属性的意思就是让我们的菜单点击的时候启用路由功能,el-menu-item的index属性配置要和我们的路由的path一一对应 再一方面就是我们的主内容区域要添加路由视图,这样路由切换的时候页面会显示在这个区域里 <el-main class="content"><!-- 放置表格 --><router-view/></el-main> ...
这一句就是由路由传递参数时的写法 <!-- 嵌套路由: --> <el-menu-item index="5"> <!-- name:传组件名,params:传递参数 需要对象 需要通过v-bind绑定--> <router-link :to="{name:'UserProfile',params:{id: 1}}">个人信息</router-link> ...
height: calc(100vh - var(--ep-menu-item-height) - 3px); } </style> 增加两个页面: mkdirsrc/viewstouchsrc/views/Home.vuetouchsrc/views/Edit.vue Home.vue <template> <el-row>I'm Home</el-row> <el-input v-model='who' />
</el-menu-item> </template> <script setup lang="ts"> interface Menu { name: string //菜单唯一标识,与路由名保持一致 chineseName: string //菜单显示名称 childMenu?: Menu[] | undefined //子菜单 } defineProps<{ menu: Menu }>()
树叶:没有子菜单,使用 el-menu-item 实现,加载组件的菜单。 图标:使用 component 加载图标组件。 然后设置属性即可,这样一个n级菜单就搞定了。 封装一个动态tabs 菜单有了,下一步就是tabs,为了满足不同的需求,这里封装两个组件,一个单tab的,一个是动态多tabs的。