AI 助理
备案控制台
开发者社区 云计算 文章 正文

element-ui——二级菜单和顶部导航联动

2023-04-22 170
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 二级菜单和顶部导航联动

目前

8faf9f4aa36a440482cebfff54d97a91.png

原本数据结构

const users = [{
  id: 1,
  username: 'normal',
  password: 'normal',
  token: 'abcdefghijklmnopqrstuvwxyz',
  leftMenus: [{
    title: '用户管理',
    key: '/user',
    name: 'user',
    icon: 'el-icon-user-solid',
    rights: ['view', 'edit', 'add', 'delete']
    },
    {
    title: '商品管理',
    key: '/products',
    name: 'products',
    icon: 'el-icon-s-goods',
    children: [{
      title: '品类管理',
      key: '/category',
      name: 'category',
      icon: 'el-icon-s-ticket',
      rights: ['view', 'edit', 'add', 'delete']
      },
      {
      title: '商品生产',
      key: '/product',
      name: 'product',
      icon: 'el-icon-s-promotion',
      rights: ['view', 'edit', 'add', 'delete']
      }
    ]
    },
    {
    title: '图形图表',
    key: '/charts',
    name: 'charts',
    icon: 'el-icon-picture',
    children: [{
      title: '柱线图',
      key: '/charts/bar',
      name: 'bar',
      icon: 'el-icon-s-data',
      rights: ['view', 'edit', 'add', 'delete']
      },
      {
      title: '折线图',
      key: '/charts/line',
      name: 'line',
      icon: 'el-icon-s-marketing',
      rights: ['view', 'edit', 'add', 'delete']
      },
      {
      title: '饼图',
      key: '/charts/pie',
      name: 'pie',
      icon: 'el-icon-s-help',
      rights: ['view', 'edit', 'add', 'delete']
      },
    ]
    }
  ]
  },
  {
  id: 2,
  username: 'admin',
  password: 'admin',
  token: 'abcdefghijklmnopqrstuvwxyz'.split('').reverse().join(''),
  leftMenus: [{
    title: '用户管理',
    key: '/user',
    name: 'user',
    icon: 'el-icon-user-solid',
    rights: ['view', 'edit', 'add', 'delete']
    },
    {
    title: '商品管理',
    key: '/products',
    name: 'products',
    icon: 'el-icon-s-goods',
    children: [{
      title: '品类管理',
      key: '/category',
      name: 'category',
      icon: 'el-icon-s-ticket',
      rights: ['view', 'edit', 'add', 'delete']
      },
      {
      title: '商品生产',
      key: '/product',
      name: 'product',
      icon: 'el-icon-s-promotion',
      rights: ['view', 'edit', 'add', 'delete']
      }
    ]
    },
    {
    title: '角色管理',
    key: '/role',
    name: 'role',
    icon: 'el-icon-s-custom',
    rights: ['view', 'edit', 'add', 'delete']
    },
    {
    title: '图形图表',
    key: '/charts',
    name: 'charts',
    icon: 'el-icon-picture',
    children: [{
      title: '柱线图',
      key: '/charts/bar',
      name: 'bar',
      icon: 'el-icon-s-data',
      rights: ['view', 'edit', 'add', 'delete']
      },
      {
      title: '折线图',
      key: '/charts/line',
      name: 'line',
      icon: 'el-icon-s-marketing',
      rights: ['view', 'edit', 'add', 'delete']
      },
      {
      title: '饼图',
      key: '/charts/pie',
      name: 'pie',
      icon: 'el-icon-s-help',
      rights: ['view', 'edit', 'add', 'delete']
      },
    ]
    }
  ]
  }
]

因为新增顶部导航，所以要重新构建数据结构 。

修改后的数据结构

const users = [{
  id: 1,
  username: 'normal',
  password: 'normal',
  token: 'abcdefghijklmnopqrstuvwxyz',
  navBar: {
    active: '0',
    list: [{
      name: "首页",
      subActive: '0',
      leftMenus: [{
        id: 1,
        title: '用户管理1',
        key: '/user',
        name: 'user',
        icon: 'el-icon-user-solid',
        rights: ['view', 'edit', 'add', 'delete']
      },
      {
        id: 2,
        title: '商品管理',
        name: 'products',
        icon: 'el-icon-s-goods',
        children: [{
          id: 21,
          title: '品类管理',
          key: '/category',
          name: 'category',
          icon: 'bars',
          rights: ['view', 'edit', 'add', 'delete']
        },
        {
          id: 22,
          title: '商品生产',
          key: '/product',
          name: 'product',
          icon: 'tool',
          rights: ['view', 'edit', 'add', 'delete']
        }
        ]
      },
      {
        id: 4,
        title: '图形图表',
        name: 'charts',
        icon: 'el-icon-s-platform',
        children: [{
          id: 41,
          title: '柱线图',
          key: '/charts/bar',
          name: 'bar',
          icon: 'el-icon-s-data',
          rights: ['view', 'edit', 'add', 'delete']
        },
        {
          id: 42,
          title: '折线图',
          key: '/charts/line',
          name: 'line',
          icon: 'el-icon-s-marketing',
          rights: ['view', 'edit', 'add', 'delete']
        },
        {
          id: 43,
          title: '饼图',
          key: '/charts/pie',
          name: 'pie',
          icon: 'el-icon-s-help',
          rights: ['view', 'edit', 'add', 'delete']
        },
        ]
      }
      ]
    },
    {
      name: "商品",
      subActive: '0',
      leftMenus: [{
      id: 1,
      title: '用户管理2',
      key: '/user2',
      name: 'user2',
      icon: 'el-icon-user-solid',
      rights: ['view', 'edit', 'add', 'delete']
      }]
    },
    {
      name: "订单",
      subActive: '0',
      leftMenus: [{
        id: 32,
        title: '订单管理',
        key: '/dingg',
        name: 'dingg',
        icon: 'el-icon-user-solid',
        rights: ['view', 'edit', 'add', 'delete']
      },
      {
        id: 34,
        title: '订单统计',
        name: 'ding',
        icon: 'el-icon-user-solid',
        children: [{
        id: 35,
        title: '订单汇总',
        key: '/ding/hui',
        name: 'dinghui',
        icon: 'el-icon-s-data',
        rights: ['view', 'edit', 'add', 'delete']
        }, ]
      }
      ]
    },
    {
      name: "会员"
    },
    {
      name: "设置"
    },
    ]
  }
  },
  {
  id: 2,
  username: 'admin',
  password: 'admin',
  token: 'abcdefghijklmnopqrstuvwxyz'.split('').reverse().join(''),
  /* rights: [{
      id: 1,
      authName: '用户管理',
      icon: 'icon-menu',
      children: [{
        id: 11,
        authName: '用户项目1',
        path: '/menu/one',
        rights: ['view', 'edit', 'add']
      }, {
        id: 12,
        authName: '用户项目2',
        path: '/menu/two',
        rights: ['view', 'edit', 'add', 'delete']
      }]
    }, {
      id: 2,
      authName: '用户权限',
      icon: 'icon-menu',
      children: [{
        id: 22,
        authName: '权限项目1',
        path: '/menu/three',
        rights: ['view', 'edit', 'add', 'delete']
      }]
    },
  {
   id: 3,
   authName: '用户信息',
   icon: 'icon-menu'
  },
  ] */
  leftMenus: [{
    id: 1,
    title: '用户管理',
    key: '/user',
    name: 'user',
    icon: 'el-icon-user-solid',
    rights: ['view', 'edit', 'add', 'delete']
    },
    {
    id: 2,
    title: '商品管理',
    key: '/products',
    name: 'products',
    icon: 'el-icon-s-goods',
    children: [{
      id: 21,
      title: '品类管理',
      key: '/category',
      name: 'category',
      icon: 'bars',
      rights: ['view', 'edit', 'add', 'delete']
      },
      {
      id: 22,
      title: '商品生产',
      key: '/product',
      name: 'product',
      icon: 'tool',
      rights: ['view', 'edit', 'add', 'delete']
      }
    ]
    },
    {
    id: 3,
    title: '角色管理',
    key: '/role',
    name: 'role',
    icon: 'el-icon-s-custom',
    rights: ['view', 'edit', 'add', 'delete']
    },
    {
    id: 4,
    title: '图形图表',
    key: '/charts',
    name: 'charts',
    icon: 'el-icon-s-platform',
    children: [{
      id: 41,
      title: '柱线图',
      key: '/charts/bar',
      name: 'bar',
      icon: 'el-icon-s-data',
      rights: ['view', 'edit', 'add', 'delete']
      },
      {
      id: 42,
      title: '折线图',
      key: '/charts/line',
      name: 'line',
      icon: 'el-icon-s-marketing',
      rights: ['view', 'edit', 'add', 'delete']
      },
      {
      id: 43,
      title: '饼图',
      key: '/charts/pie',
      name: 'pie',
      icon: 'el-icon-s-help',
      rights: ['view', 'edit', 'add', 'delete']
      },
    ]
    }
  ]
  }
]

头部布局

<div class="header-right">
    <el-menu :default-active="user.navBar.active" class="el-menu-demo" mode="horizontal" @select="handleSelect"
    background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
    <el-menu-item :index="index+''" v-for="(item,index) in user.navBar.list" :key="index">{{item.name}}</el-menu-item>
    <el-submenu index="2">
      <template slot="title">{{user.username}}</template>
      <el-menu-item index="2-1">设置</el-menu-item>
      <el-menu-item index="2-2">退出</el-menu-item>
    </el-submenu>
    </el-menu>
  </div>
  methods: {
    ...mapMutations(["getslideMenus"]),
    handleSelect(key, keyPath) {
      this.user.navBar.active = key;
      let item = this.user.navBar.list[this.user.navBar.active];
      console.log(key, keyPath);
      this.getslideMenus(item.leftMenus);
   this.$router.push({
    name:item.leftMenus[0].name
   })
   if (key == '0') {
    this.$router.push({
     name:'welcome'
    })
   }
    },
    collapse() {
      this.isCollapseq = !this.isCollapseq;
      this.$bus.$emit("collapseaside", this.isCollapseq);
    },
  },
  mounted() {
    let item = this.user.navBar.list[this.user.navBar.active]
    this.getslideMenus(item.leftMenus)
  },
  computed: {
    ...mapState(['user'])
  }

d5242d62ab504d4ab3dda3a92fd0fe81.png

vuex

export default new Vuex.Store({
  state: {
  bread: [],
  slideMenus:[],
  user: JSON.parse(window.sessionStorage.getItem('rightlist')) || {}
  },
  mutations: {
  addBread(state,preload) {
            state.bread = preload
  },
  getslideMenus(state,preload){
    state.slideMenus = preload
    },
  getLogin(state, preload) {
    state.user = preload
    window.sessionStorage.setItem('rightlist', JSON.stringify(preload))
  }
  },
  getters: {
  },
  actions: {}
})

Header.vue

<template>
  <div class="header">
    <div class="header-left">
      <div class="header-left__logo">
        <img src="@/assets/logo.png" alt="" />
      </div>
      <div class="header-left__title">后台管理系统权限Demo</div>
      <i class="el-icon-s-fold icon" @click="collapse"></i>
    </div>
    <div class="header-right">
      <el-menu
        :default-active="user.navBar.active"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#333333"
        text-color="#fff"
        active-text-color="#ffd04b"
      >
        <el-menu-item
          :index="index + ''"
          v-for="(item, index) in user.navBar.list"
          :key="index"
          >{{ item.name }}</el-menu-item
        >
        <el-submenu index="2">
          <template slot="title">{{ user.username }}</template>
          <el-menu-item index="2-1">设置</el-menu-item>
          <el-menu-item index="2-2">退出</el-menu-item>
        </el-submenu>
      </el-menu>
    </div>
  </div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
export default {
  name: "Header",
  data() {
    return {
      isCollapseq: false,
    };
  },
  methods: {
    ...mapMutations(["getslideMenus","getData"]),
    handleSelect(key, keyPath) {
      this.user.navBar.active = key;
      // this.getLogin(this.user)
      let item = this.user.navBar.list[this.user.navBar.active];
      console.log(key, keyPath);
      this.getslideMenus(item.leftMenus);
   this.$router.push({
    name:item.leftMenus[0].name
   })
   if (key == '0') {
    this.$router.push({
     name:'welcome'
    })
   }
    window.sessionStorage.setItem('nactive',JSON.stringify(this.user.navBar.active))
    },
    collapse() {
      this.isCollapseq = !this.isCollapseq;
      this.$bus.$emit("collapseaside", this.isCollapseq);
    },
  },
  computed: {
    ...mapState(["user"]),
  },
  mounted() {
    let i = JSON.parse(window.sessionStorage.getItem('nactive'))
    this.user.navBar.active = i
    let item = this.user.navBar.list[this.user.navBar.active];
    this.getslideMenus(item.leftMenus);
  },
  watch:{
    $route(to,from){
      window.sessionStorage.setItem('nactive',JSON.stringify(this.user.navBar.active))
      if (to.path == '/welcome') {
          this.user.navBar.active = '0',
          window.sessionStorage.setItem('nactive',JSON.stringify(this.user.navBar.active))
          let item = this.user.navBar.list[this.user.navBar.active]
          this.getslideMenus(item.leftMenus)
      }
    }
  }
};
</script>
<style lang="less" scoped>
.header {
  width: 100%;
  height: 100%;
  background-color: #333;
  display: flex;
  justify-content: space-between;
  box-shadow: 0 2px 5px #333;
  &-left {
    height: 100%;
    display: flex;
    align-items: center;
    .icon {
      color: #fff;
      margin-left: 30px;
    }
    &__logo {
      width: 80px;
      height: 100%;
      padding: 5px;
      & > img {
        width: 100%;
        height: 100%;
      }
    }
    &__title {
      font-size: 20px;
      color: #fff;
      text-shadow: 10px 10px rgba(25, 255, 255, 0.3);
    }
  }
  &-right {
    display: flex;
    align-items: center;
    &__info {
      &-name {
        color: #f0ffff;
        font-size: 16px;
        margin-right: 15px;
      }
    }
  }
}
</style>

Home.vue

methods: {
    ...mapMutations(["addBread"]),
    /* 面包屑导航 */
    getbreadcrumb() {
      let getobj = this.$route.matched.filter((v) => v.name);
      console.log(getobj);
      let arr = [];
      getobj.forEach((v) => {
        if (v.name == "welcome" || v.name == "Home") {
          return;
        }
        arr.push({
          name: v.name,
          path: v.path,
          title: v.meta.title,
        });
        /* 多级导航 */
        this.slideMenus.forEach((item) => {
          console.log(item);
          if (item.children) {
            item.children.filter((i) => i.key == v.path).length > 0
              ? arr.unshift({ 
      title: item.title 
    })
              : arr;
          }
        });
      });
        if (arr.length > 0) {
          arr.unshift({
            name: "Home",
            path: "/",
            title: "后台首页",
          });
        }
        this.bran = arr;
        this.addBread(this.bran);
    },
  },

HomeLeft添加个样式判断

<template>
  <div class="navMenu">
    <label v-for="(navMenu,n) in navMenus" :key="n">
      <!--只有一级菜单-->
      <el-menu-item v-if="!navMenu.children"
                    :index="n + ''"
                    :route="navMenu.key"
                    :style="$route.path == navMenu.key?'color:#ffd04b':''"
      >
        <!--图标-->
        <i :class="navMenu.icon" :style="$route.path == navMenu.key?'color:#ffd04b':''"></i>
        <!--标题-->
        <span slot="title">{{navMenu.title}}</span>
      </el-menu-item>
      <!--有多级菜单-->
      <el-submenu v-if="navMenu.children"
                  :key="navMenu.key"
                  :index="n+''"
      >
        <template slot="title">
          <i :class="navMenu.icon"></i>
          <span> {{navMenu.title}}</span>
        </template>
        <!--递归组件，把遍历的值传回子组件，完成递归调用-->
        <nav-menu :navMenus="navMenu.children"></nav-menu>
      </el-submenu>
    </label>
  </div>
</template>
<script>
  export default {
    name: 'NavMenu', //使用递归组件必须要有
    props: ['navMenus'], // 传入子组件的数据
    data() {
      return {}
    },
    methods: {
      handleSelect(key,keyPath){
        console.log('1212')
        console.log(key,keyPath)
      }
    }
  }
</script>
<style scoped>
</style>

加个路由

import User2 from '../views/User2.vue'    
            {
    path: '/user2',
    name:'user2',
    meta:{title:'用户管理2'},
    component: User2
    },

现在：

b0d16b5501804af99c10ec56358b4769.png


关键词：
UI导航
UI菜单
UI菜单导航
SouthernWind
目录
相关文章
艳艳耶
|
JSON 前端开发 Java
Mock.js之Element-ui搭建首页导航与左侧菜单
Mock.js之Element-ui搭建首页导航与左侧菜单
艳艳耶
82 0
无法自律的人
|
JSON 前端开发 JavaScript
【Element-UI】Mockjs及案例首页导航、左侧菜单
Mock.js是一个用于生成模拟数据的JavaScript库。它能够模拟后端API接口，用于前端开发时进行接口调试和测试提高自动化测试效率。使用Mock.js可以快速创建虚拟的数据，并且可以设置数据的类型、格式和规则，从而模拟真实的数据响应。Mock.js支持生成随机数据拦截Ajax请求以返回模拟数据支持RESTful API风格等功能，能够提高前端开发效率，并且减少对后端接口的依赖。支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
无法自律的人
159 0
疯狂的猿
|
3月前
|
搜索推荐 数据库
最新UI六零导航系统源码 | 多模版全开源
使用PHP+MySql，增加后台管理 多模板选择，支持在后台切换模板 增加常用搜索引擎，如：知乎、哔哩哔哩、在线翻译等（支持自定义） 支持用户提交收录申请，地址：http://域名/apply 部分模板优化和增加部分功能，如返回顶部、获取输入框焦点、时间日期显示等
疯狂的猿
75 1
孤留光乩
|
JSON 前端开发 JavaScript
Element UI搭建首页导航和左侧菜单以及Mock.js和（组件通信）总线的运用
Element UI搭建首页导航和左侧菜单以及Mock.js和（组件通信）总线的运用
孤留光乩
105 0
现在是571
|
6月前
|
JSON 前端开发 JavaScript
【Element-UI】Mock.js，案例首页导航、左侧菜单
【Element-UI】Mock.js，案例首页导航、左侧菜单
现在是571
87 0
Mr.Meng_95
|
人工智能 自然语言处理 语音技术
关于element ui中引入官方的NavMenu时出现点击某个子菜单时，所有的子菜单全都展开问题
关于element ui中引入官方的NavMenu时出现点击某个子菜单时，所有的子菜单全都展开问题
Mr.Meng_95
248 0
落798.
|
小程序 开发者 iOS开发
【 uniapp - 黑马优购 | 商品详情 】详情页UI结构设计、商品导航区域实现
【 uniapp - 黑马优购 | 商品详情 】详情页UI结构设计、商品导航区域实现
落798.
348 0
忆凡
|
JavaScript
vue element-ui 菜单管理使用图标选择器组件
vue element-ui 菜单管理使用图标选择器组件
忆凡
539 0
你挚爱的强哥
|
JSON JavaScript 前端开发
【2】Vue项目引用Element UI（饿了么框架）菜单导航条初期配置
【2】Vue项目引用Element UI（饿了么框架）菜单导航条初期配置
你挚爱的强哥
373 0
游客qf4jmczx4xu2y
|
12天前
|
搜索推荐 Android开发 开发者
探索安卓开发中的自定义视图：打造个性化UI组件
【10月更文挑战第39天】在安卓开发的世界中，自定义视图是实现独特界面设计的关键。本文将引导你理解自定义视图的概念、创建流程，以及如何通过它们增强应用的用户体验。我们将从基础出发，逐步深入，最终让你能够自信地设计和实现专属的UI组件。
游客qf4jmczx4xu2y
34 4