第一步：新建一个组件navMenu.vue
html
<label v-for="(item, index) in navlist" :key="index">
<el-submenu
v-show="item.adminMenu.menuType == 'list'"
:index="item.adminMenu.index.toString()"
@mouseenter.native="collapseOpen(index)"
@mouseleave.native="collapseClose(index)"
@click="menuClick(item.adminMenu.index)">
<template slot="title">
<i
:class="[
item.adminMenu.icon,
{ legend: isHover && select === index },
]"
></i>
<span :class="{legend: isHover && select === index}">{
{ item.adminMenu.d_department }}</span>
</template>
<NavMenu :navlist="item.children"></NavMenu>
</el-submenu>
<el-menu-item
v-show="item.adminMenu.menuType == 'page'"
:index="item.adminMenu.index.toString()"
@mouseenter.native="collapseOpen(index)"
@mouseleave.native="collapseClose(index)"
@click="menuClick(item.adminMenu.index)"
>
<template slot="title">
<!-- <i class="el-icon-s-cooperation"></i> -->
<i
:class="[
item.adminMenu.icon,
{ legend: isHover && select === index },
]"
></i>
<span :class="{legend: isHover && select === index}">{
{ item.adminMenu.d_department }}</span>
</template>
</el-menu-item>
<el-menu-item
v-show="item.adminMenu.menuType == 'menu'"
:index="item.adminMenu.index.toString()"
@mouseenter.native="collapseOpen(index)"
@mouseleave.native="collapseClose(index)"
@click="menuClick(item.adminMenu.index)">
<i
:class="[
item.adminMenu.icon,
{ legend: isHover && select === index },
]"
></i>
<span slot="title" :class="{legend: isHover && select === index}">{
{ item.adminMenu.d_department }}</span>
</el-menu-item>
</label>
javaScript
props: ["navlist"]
第二步：页面引用组件
html
<el-menu
:default-active="$route.path"
class="el-menu-vertical-demo"
:collapse-transition="false"
:unique-opened="true"
@select="activationBtn"
:collapse="$store.state.isCollapse"
>
<NavMenu :navlist="list"></NavMenu>
</el-menu>
javaScript
// 假数据
list: [
{
adminMenu: {
d_id: "",
d_pid: "0",
d_department: "系统首页",
menuType: "list",
index: "1",
icon: 'iconfont icon-shouye-'
},
children: [
{
adminMenu: {
d_id: "",
d_pid: "",
d_department: "工作台",
menuType: "page",
index: "1-1",
},
},
{
adminMenu: {
d_id: "daf54c5d-a5d1-c045-677e-d0cffcaf4d9a",
d_pid: "18340fd9-84bf-f470-b20b-428c70edbbc5",
d_department: "数据统计",
menuType: "page",
index: "1-2",
},
},
],
},
{
adminMenu: {
d_id: "",
d_pid: "0",
d_department: "栏目管理",
menuType: "menu",
index: "/programManagement",
icon: 'iconfont icon-liebiao-copy1'
},
},
{
adminMenu: {
d_id: "",
d_pid: "0",
d_department: "文章管理",
menuType: "list",
index: "3",
icon: 'iconfont icon-wenzhang2'
},
children: [
{
adminMenu: {
d_id: "",
d_pid: "",
d_department: "文章列表",
menuType: "page",
index: "/essay"
},
},
{
adminMenu: {
d_id: "",
d_pid: "",
d_department: "文章分类",
menuType: "page",
index: "/essaycategory"
},
},
{
adminMenu: {
d_id: "",
d_pid: "",
d_department: "文章标签",
menuType: "page",
index: "/essay/tags"
},
},
],
},
{
adminMenu: {
d_id: "",
d_pid: "0",
d_department: "产品管理",
menuType: "list",
index: "4",
icon: 'iconfont icon-chanpin'
},
children: [
{
adminMenu: {
d_id: "",
d_pid: "",
d_department: "产品列表",
menuType: "page",
index: "/product"
},
},
{
adminMenu: {
d_id: "",
d_pid: "",
d_department: "产品分类",
menuType: "page",
index: "/productCategory"
},
},
{
adminMenu: {
d_id: "",
d_pid: "",
d_department: "产品标签",
menuType: "page",
index: "/productTags"
},
},
],
},
{
adminMenu: {
d_id: "",
d_pid: "0",
d_department: "图片管理",
menuType: "list",
index: "5",
icon: 'iconfont icon-tupian'
},
children: [
{
adminMenu: {
d_id: "",
d_pid: "",
d_department: "图片列表",
menuType: "page",
index: "5-1",
},
},
{
adminMenu: {
d_id: "",
d_pid: "",
d_department: "设置水印",
menuType: "page",
index: "5-2",
},
},
{
adminMenu: {
d_id: "",
d_pid: "",
d_department: "图片分类",
menuType: "page",
index: "/pictureCategory",
},
},
{
adminMenu: {
d_id: "",
d_pid: "",
d_department: "图片标签",
menuType: "page",
index: "/pictureTags",
},
},
],
},
{
adminMenu: {
d_id: "",
d_pid: "0",
d_department: "视频管理",
menuType: "list",
index: "6",
icon: 'iconfont icon-video-fill'
},
children: [
{
adminMenu: {
d_id: "",
d_pid: "",
d_department: "视频列表",
menuType: "page",
index: "6-1",
},
},
{
adminMenu: {
d_id: "",
d_pid: "",
d_department: "设置水印",
menuType: "page",
index: "6-2",
},
},
{
adminMenu: {
d_id: "",
d_pid: "",
d_department: "视频分类",
menuType: "page",
index: "6-3",
},
},
],
},
{
adminMenu: {
d_id: "",
d_pid: "0",
d_department: "文件管理",
menuType: "list",
index: "7",
icon: 'iconfont icon-wenjian'
},
children: [
{
adminMenu: {
d_id: "",
d_pid: "",
d_department: "文件列表",
menuType: "page",
index: "/fileList",
},
},
{
adminMenu: {
d_id: "",
d_pid: "",
d_department: "文件分类",
menuType: "page",
index: "/fileCategory",
},
},
{
adminMenu: {
d_id: "",
d_pid: "",
d_department: "文件标签",
menuType: "page",
index: "/fileTags",
},
},
],
},
{
adminMenu: {
d_id: "",
d_pid: "0",
d_department: "留言管理",
menuType: "menu",
index: "8",
icon: 'iconfont icon-liuyanfill'
},
},
{
adminMenu: {
d_id: "",
d_pid: "0",
d_department: "拓展项管理",
menuType: "list",
index: "9",
icon: 'iconfont icon-icon_huabanfuben'
},
children: [
{
adminMenu: {
d_id: "",
d_pid: "",
d_department: "友情链接",
menuType: "page",
index: "9-1",
},
},
{
adminMenu: {
d_id: "",
d_pid: "",
d_department: "网站联系信息",
menuType: "page",
index: "9-2",
},
},
{
adminMenu: {
d_id: "",
d_pid: "",
d_department: "自媒体账号",
menuType: "page",
index: "9-3",
},
},
{
adminMenu: {
d_id: "",
d_pid: "",
d_department: "隐私条款&版权信息",
menuType: "page",
index: "9-4",
},
},
],
},
{
adminMenu: {
d_id: "",
d_pid: "0",
d_department: "系统设置",
menuType: "list",
index: "10",
icon: 'iconfont icon-weibiaoti103'
},
children: [
{
adminMenu: {
d_id: "",
d_pid: "",
d_department: "网站设置",
menuType: "page",
index: "10-1",
},
},
{
adminMenu: {
d_id: "",
d_pid: "",
d_department: "用户管理",
menuType: "page",
index: "10-2",
},
},
{
adminMenu: {
d_id: "",
d_pid: "",
d_department: "敏感词设置",
menuType: "page",
index: "10-3",
},
},
{
adminMenu: {
d_id: "",
d_pid: "",
d_department: "配置管理",
menuType: "page",
index: "10-4",
},
},
{
adminMenu: {
d_id: "",
d_pid: "",
d_department: "操作日志",
menuType: "page",
index: "10-5",
},
},
],
},
]