vue后台项目左侧菜单栏配合element-ui中tag标签实现多标签页导航栏
效果图
第一步:设置左侧菜单栏
左侧菜单栏,左侧菜单我这边自定义写死的数据。
分为有子菜单和没子菜单等情况,我用到的只有俩种,没有三级菜单。
HTML部分
<el-menu
unique-opened
:default-active="$route.path"
class="el-menu-vertical-demo"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b"
router
> <!-- 没有子菜单 -->
<el-menu-item
:index="item.path"
v-for="item in noChildren"
:key="item.path"
@click="clickMenu(item)"
>
<i :class="'el-icon-' + item.icon"></i>
<span slot="title">{
{ item.label }}</span>
</el-menu-item>
<!-- 有子菜单数据 -->
<el-submenu
index="index"
v-for="(item, index) in hasChildren"
:key="index">
<template slot="title">
<i :class="'el-icon-' + item.icon"></i>
<span>{
{ item.label }}</sp
CSDN-Ada助手: 恭喜用户写出这么有用的一篇博客!uniapp中替代location.href跳转的方法确实是一个很实用的技巧。希望用户能够继续分享自己的经验和技术,让更多的人受益。下一步的创作建议是可以深入探讨uniapp中其他常用的技巧和技术,帮助更多的开发者提高工作效率。期待用户的下一篇作品! CSDN 会根据你创作的博客的质量,给予优秀的博主博客红包奖励。请关注 https://bbs.csdn.net/forums/csdnnews?typeId=116148&utm_source=csdn_ai_ada_blog_reply7 看奖励名单。
OXINKA: 有三级四级的呢怎么办呀
北蒙岛的雨季~: 没有处理tag过多的情况,左右滚动效果。
好多事。: 找不到更好方法,大哥你找找怎么办
好多事。: 只是编译器会提醒,页面并不会报错