element实现二级菜单和顶部导航联动的示例
程序员文章站
2022-06-09 19:01:42
目前原本数据结构const users = [{id: 1,username: 'normal',password: 'normal',token: 'abcdefghijklmnopqrstuvwx...
目前
原本数据结构
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']) }
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: {} })
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 },
现在:
到此这篇关于element实现二级菜单和顶部导航联动的示例的文章就介绍到这了,更多相关element 二级菜单和顶部导航联动内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!
上一篇: hdu6321 C. Dynamic Graph Matching
下一篇: Timer定时器