效果图
第一步：设置左侧菜单栏
左侧菜单栏，左侧菜单我这边自定义写死的数据。文章来源：https://www.toymoban.com/news/detail-503648.html
分为有子菜单和没子菜单等情况，我用到的只有俩种，没有三级菜单。文章来源地址https://www.toymoban.com/news/detail-503648.html
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 }}</s到了这里，关于vue后台项目左侧菜单栏配合element-ui中tag标签实现多标签页导航栏的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
