element实现二级菜单和顶部导航联动的示例

目前

原本数据结构

const urs = [{id: 1,urname: 'normal',password: 'normal',token: 'abcdefghijklmnopqrstuvwxyz',leftmenus: [{title: '用户管理',key: '/ur',name: 'ur',icon: 'el-icon-ur-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: '/ch人生不相见动如参与商arts/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,urname: 'admin',password: 'admin',token: 'abcdefghijklmnopqrstuvwxyz'.split('').rever().join(''),leftmenus: [{title: '用户管理',key: '/ur',name: 'ur',icon: 'el-icon-ur-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 urs = [{id: 1,urname: 'normal',password: 'normal',token: 'abcdefghijklmnopqrstuvwxyz',navbar: {active: '0',list: [{name: "首页",subactive: '0',leftmenus: [{id: 1,title: '用户管理1',key: '/ur',name: 'ur',icon: 'el-icon-ur-solid',rights: ['view', 'edit', 'add', 'delete']},{id: 2,title: '商品管理',name: 'products',icon: 'el-ico莫大于心死n-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: '/ur2',name: 'ur2',icon: 'el-icon-ur-solid',rights: ['view', 'edit', 'add', 'delete']}]},{name: "订单",subactive: '0',leftmenus: [{id: 32,title: '订单管理',key: '/dingg',name: 'dingg',icon: 'el-icon-ur-solid',rights: ['view', 'edit', 'add', 'delete']},{id: 34,title: '订单统计',name: 'ding',icon: 'el-icon-ur-solid',children: [{id: 35,title: '订单汇总',key: '/ding/hui',name: 'dinghui',icon: 'el-icon-s-data',rights: ['view', 'edit', 'add', 'delete']}, ]}  ]},{name: "会员"},{name: "设置"},]}},{id: 2,urname: 'admin',password: 'admin',token: 'abcdefghijklmnopqrstuvwxyz'.split('').rever().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: '/ur',name: 'ur',icon: 'el-icon-ur-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="ur.navbar.active" class="el-menu-demo" mode="horizontal" @lect="handlelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"><el-menu-item :index="index+''" v-for="(item,index) in ur.navbar.list" :key="index">{{item.name}}</el-menu-item><el-submenu index="2"><template slot="title">{{ur.urname}}</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"]),    handlelect(key, keypath) {      this.ur.navbar.active = key;      let item = this.ur.navbar.list[this.ur.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'  })  }    },    collap() {      this.iscollapq = !this.iscollapq;      this.$bus.$emit("collapaside", this.iscollapq);    },  },mounted() {let item = this.ur.navbar.list[this.ur.navbar.active]this.getslidemenus(item.leftmenus)},computed: {...mapstate(['ur'])}

vuex

export default new vuex.store({state: {bread: [],slidemenus:[],ur: json.par(window.ssionstorage.getitem('rightlist')) || {} },mutations: {addbread(state,preload) {            state.bread = preload},getslidemenus(state,preload){state.slidemenus = preload   },getlogin(state, preload) {state.ur = preloadwindow.ssionstorage.titem('rightlist', json.stringify(preload))} },getters: { },actions: {}})

home.vue

  methods: {    ...mapmutations(["addbread"]),    /* 面包屑导航 */    getbreadcrumb() {    kd是什么  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);          i豪华别墅f (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: {      handlelect(key,keypath){        console.log('1212')        console.log(key,keypath)      }    }  }</script> <style scoped> </style>

加个路由

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

现在：

到此这篇关于element实现二级菜单和顶部导航联动的示例的文章就介绍到这了,更多相关element 二级菜单和顶部导航联动内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持www.887551.com！