elementui二级菜单,elementui二级联动下拉框

　　本文主要介绍了元素实现二级菜单和顶部导航联动的示例，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

　　目前

　　原本数据结构

　　常量用户=[{

　　id: 1，

　　用户名："正常",

　　密码："正常",

　　token: abcdefghijklmnopqrstuvwxyz ，

　　左侧菜单：[{

　　标题： 用户管理，

　　密钥："/用户",

　　姓名：用户，

　　图标：“El-图标-用户-实体",

　　权限：[查看,编辑,添加,删除]

　　},

　　{

　　标题： 商品管理，

　　关键字："/产品",

　　名称：产品，

　　图标：“el-icon-s-goods”，

　　孩子：[{

　　标题： 品类管理，

　　关键字："/类别",

　　名称："类别",

　　图标：“el-icon-s-ticket”，

　　权限：[查看,编辑,添加,删除]

　　},

　　{

　　标题： 商品生产，

　　密钥："/产品",

　　名称：产品，

　　图标：“el-icon-s-promotion”，

　　权限：[查看,编辑,添加,删除]

　　}

　　]

　　},

　　{

　　标题： 图形图表，

　　关键字："/图表"，

　　名称：图表，

　　图标：“el图标图片",

　　孩子：[{

　　标题： 柱线图，

　　关键字："/图表/条形图",

　　名称：酒吧，

　　图标：“el-icon-s-data”，

　　权限：[查看,编辑,添加,删除]

　　},

　　{

　　标题： 折线图，

　　关键字："/图表/线条",

　　名称：行，

　　图标：“el-icon-s-marketing”，

　　权限：[查看,编辑,添加,删除]

　　},

　　{

　　标题： 饼图，

　　关键字："/图表/饼图",

　　名称："馅饼",

　　图标：" el-icon-s-help "，

　　权限：[查看,编辑,添加,删除]

　　},

　　]

　　}

　　]

　　},

　　{

　　id: 2，

　　用户名："管理员",

　　密码："管理员",

　　标记：" abcdefghijklmnopqrstuvwxyz " .拆分("")。反转()。加入(""),

　　左侧菜单：[{

　　标题： 用户管理，

　　密钥："/用户",

　　姓名：用户，

　　图标：“El-图标-用户-实体",

　　权限：[查看,编辑,添加,删除]

　　},

　　{

　　标题： 商品管理，

　　关键字："/产品",

　　名称：产品，

　　图标：“el-icon-s-goods”，

　　孩子：[{

　　标题： 品类管理，

　　关键字："/类别",

　　名称："类别",

　　图标：“el-icon-s-ticket”，

　　权限：[查看,编辑,添加,删除]

　　},

　　{

　　标题： 商品生产，

　　密钥："/产品",

　　名称：产品，

　　图标：“el-icon-s-promotion”，

　　权限：[查看,编辑,添加,删除]

　　}

　　]

　　},

　　{

　　标题： 角色管理，

　　键："/角色"，

　　名称："角色",

　　图标： el-icon-s-custom ，

　　权限：[查看,编辑,添加,删除]

　　},

　　{

　　标题： 图形图表，

　　关键字："/图表"，

　　名称：图表，

　　图标：“el图标图片",

　　孩子：[{

　　标题： 柱线图，

　　关键字："/图表/条形图",

　　名称：酒吧，

　　图标：“el-icon-s-data”，

　　权限：[查看,编辑,添加,删除]

　　},

　　{

　　标题： 折线图，

　　关键字："/图表/线条",

　　名称：行，

　　图标：“el-icon-s-marketing”，

　　权限：[查看,编辑,添加,删除]

　　},

　　{

　　标题： 饼图，

　　关键字："/图表/饼图",

　　名称："馅饼",

　　图标：" el-icon-s-help "，

　　权限：[查看,编辑,添加,删除]

　　},

　　]

　　}

　　]

　　}

　　]

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

　　修改后的数据结构

　　常量用户=[{

　　id: 1，

　　用户名："正常",

　　密码："正常",

　　token: abcdefghijklmnopqrstuvwxyz ，

　　导航栏：{

　　活动："0",

　　列表：[{

　　名称： 首页，

　　子活动："0",

　　左侧菜单：[{

　　id: 1，

　　标题： 用户管理1,

　　密钥："/用户",

　　姓名：用户，

　　图标：“El-图标-用户-实体",

　　权限：[查看,编辑,添加,删除]

　　},

　　{

　　id: 2，

　　标题： 商品管理，

　　名称：产品，

　　图标：“el-icon-s-goods”，

　　孩子：[{

　　id: 21，

　　标题： 品类管理，

　　关键字："/类别",

　　名称："类别",

　　图标："条形",

　　权限：[查看,编辑,添加,删除]

　　},

　　{

　　id: 22，

　　标题： 商品生产，

　　密钥："/产品",

　　名称：产品，

　　图标："工具",

　　权限：[查看,编辑,添加,删除]

　　}

　　]

　　},

　　{

　　id: 4，

　　标题： 图形图表，

　　名称：图表，

　　图标：“el-icon-s-platform”，

　　孩子：[{

　　id: 41，

　　标题： 柱线图，

　　关键字："/图表/条形图",

　　名称：酒吧，

　　图标：“el-icon-s-data”，

　　权限：[查看,编辑,添加,删除]

　　},

　　{

　　id: 42，

　　标题： 折线图，

　　关键字："/图表/线条",

　　名称：行，

　　图标：“el-icon-s-marketing”，

　　权限：[查看,编辑,添加,删除]

　　},

　　{

　　id: 43，

　　标题： 饼图，

　　关键字："/图表/饼图",

　　名称："馅饼",

　　图标：" el-icon-s-help "，

　　权限：[查看,编辑,添加,删除]

　　},

　　]

　　}

　　]

　　},

　　{

　　名称： 商品，

　　子活动："0",

　　左侧菜单：[{

　　id: 1，

　　标题： 用户管理2,

　　密钥："/用户2 "，

　　姓名："用户2",

　　图标：“El-图标-用户-实体",

　　权限：[查看,编辑,添加,删除]

　　}]

　　},

　　{

　　名称： 订单，

　　子活动："0",

　　左侧菜单：[{

　　id: 32，

　　标题： 订单管理，

　　键："/丁"，

　　名称：丁格，

　　图标：“El-图标-用户-实体",

　　权限：[查看,编辑,添加,删除]

　　},

　　{

　　id: 34，

　　标题： 订单统计，

　　姓名：丁，

　　图标：“El-图标-用户-实体",

　　孩子：[{

　　id: 35，

　　标题： 订单汇总，

　　关键字：/丁/惠，

　　名称：鼎辉，

　　图标：“el-icon-s-data”，

　　权限：[查看,编辑,添加,删除]

　　}, ]

　　}

　　]

　　},

　　{

　　名称： 会员

　　},

　　{

　　名称： 设置

　　},

　　]

　　}

　　},

　　{

　　id: 2，

　　用户名："管理员",

　　密码："管理员",

　　标记：" abcdefghijklmnopqrstuvwxyz " .拆分("")。反转()。加入(""),

　　/*权限：[{

　　id: 1，

　　authName:用户管理，

　　图标："图标菜单",

　　孩子：[{

　　id: 11，

　　authName:用户项目1,

　　路径："/菜单/一个"，

　　权限：[查看,编辑,添加]

　　}, {

　　id: 12，

　　authName:用户项目2,

　　路径："/菜单/两个",

　　权限：[查看,编辑,添加,删除]

　　}]

　　}, {

　　id: 2，

　　authName:用户权限，

　　图标："图标菜单",

　　孩子：[{

　　id: 22，

　　authName:权限项目1,

　　路径：/菜单/三，

　　权限：[查看,编辑,添加,删除]

　　}]

　　},

　　{

　　id: 3，

　　authName:用户信息，

　　图标："图标菜单"

　　},

　　] */

　　左侧菜单：[{

　　id: 1，

　　标题： 用户管理，

　　密钥："/用户",

　　姓名：用户，

　　图标：“El-图标-用户-实体",

　　权限：[查看,编辑,添加,删除]

　　},

　　{

　　id: 2，

　　标题： 商品管理，

　　关键字："/产品",

　　名称：产品，

　　图标：“el-icon-s-goods”，

　　孩子：[{

　　id: 21，

　　标题： 品类管理，

　　关键字："/类别",

　　名称："类别",

　　图标："条形",

　　权限：[查看,编辑,添加,删除]

　　},

　　{

　　id: 22，

　　标题： 商品生产，

　　密钥："/产品",

　　名称：产品，

　　图标："工具",

　　权限：[查看,编辑,添加,删除]

　　}

　　]

　　},

　　{

　　id: 3，

　　标题： 角色管理，

　　键："/角色"，

　　名称："角色",

　　图标： el-icon-s-custom ，

　　权限：[查看,编辑,添加,删除]

　　},

　　{

　　id: 4，

　　标题： 图形图表，

　　关键字："/图表"，

　　名称：图表，

　　图标：“el-icon-s-platform”，

　　孩子：[{

　　id: 41，

　　标题： 柱线图，

　　关键字："/图表/条形图",

　　名称：酒吧，

　　图标：“el-icon-s-data”，

　　权限：[查看,编辑,添加,删除]

　　},

　　{

　　id: 42，

　　标题： 折线图，

　　关键字："/图表/线条",

　　名称：行，

　　图标：“el-icon-s-marketing”，

　　权限：[查看,编辑,添加,删除]

　　},

　　{

　　id: 43，

　　标题： 饼图，

　　关键字："/图表/饼图",

　　名称："馅饼",

　　图标：" el-icon-s-help "，

　　权限：[查看,编辑,添加,删除]

　　},

　　]

　　}

　　]

　　}

　　]

　　头部布局

　　div class=header-right

　　El-menu:default-active= user。导航条。active class= El-menu-demo mode= horizontal @ select= handle select

　　background-color= # 545 c64 text-color= # fff active-text-color= # ffd 04 b

　　El-menu-item:index= index v-for=(item，index)in user。导航条。“list”:key=“index“{ item。name } }/El-菜单项

　　埃尔-子菜单索引=2

　　模板槽= title"{ user。用户名} }/模板

　　埃尔菜单项索引=2-1 设置/El-菜单项

　　埃尔菜单项索引=2-2 退出/El-菜单项

　　/El-子菜单

　　/el-menu

　　/div

　　方法：{

　　.mapMutations([getslideMenus])，

　　handleSelect(key，keyPath) {

　　这个。用户。导航条。active=键；

　　让item=this。用户。导航条。列出【这个。用户。导航条。活动]；

　　console.log(key，key path)；

　　这个。getslidemenus(项目。左侧菜单)；

　　这个. router.push({

　　名称：item.leftMenus[0].名字

　　})

　　if (key==0) {

　　这个. router.push({

　　姓名："欢迎"

　　})

　　}

　　},

　　折叠(){

　　this.isCollapseq=！this.isCollapseq

　　这个。$巴士$ emit(崩边，这个。iscollapseq)；

　　},

　　},

　　已安装(){

　　让item=this。用户。导航条。列出【这个。用户。导航条。活动]

　　这个。getslidemenus(项目。左侧菜单)

　　},

　　计算值：{

　　.mapState([user])

　　}

　　状态管理

　　导出默认的新Vuex .商店({

　　状态：{

　　面包：[],

　　幻灯片菜单：[],

　　用户：JSON。解析(窗口。会话存储。getitem(右列表) { }

　　},

　　突变：{

　　addBread(状态，预加载){

　　state.bread=预载

　　},

　　getslideMenus(state，preload){

　　state.slideMenus=preload

　　},

　　getLogin(state，preload) {

　　state.user=preload

　　窗户。会话存储。setitem(右列表，JSON.stringify(preload))

　　}

　　},

　　getters: {

　　},

　　动作：{}

　　})

　　Home.vue

　　方法：{

　　.mapMutations([addBread])，

　　/* 面包屑导航*/

　　getbreadcrumb() {

　　让getobj=这.$ route。匹配。filter((v)=v . name)；

　　控制台。log(获取obj)；

　　设arr=[]；

　　getobj.forEach((v)={

　　if(v . name== welcome v . name== Home ){

　　返回；

　　}

　　arr.push({

　　名称：v.name，

　　路径：v.path，

　　标题：v.meta.title，

　　});

　　/* 多级导航*/

　　这个。滑动菜单。foreach((item)={

　　控制台。日志(项目)；

　　if (item.children) {

　　项目。孩子。过滤器((I)=I . key==v . path).长度0

　　？arr.unshift({

　　标题：项目。标题

　　})

　　:arr

　　}

　　});

　　});

　　如果(数组长度为0) {

　　arr.unshift({

　　姓名：家，

　　路径："/",

　　标题： 后台首页，

　　});

　　}

　　this.bran=arr

　　这个。addbread(这个。麸皮)；

　　},

　　},

　　向左添加个样式判断

　　模板

　　div class=navMenu

　　导航菜单中的标签v-for=(navMenu，n :key= n

　　！-只有一级菜单-

　　el-menu-item v-if=！ navMenu.children

　　:index=n

　　:route=navMenu.key

　　:style= $ route。路径==导航菜单。“钥匙？”颜色：#ffd04b :

　　！-图标-

　　导航菜单. icon :style= $ route。路径==导航菜单。钥匙？color:# ffd 04 b : /I

　　！-标题-

　　导航菜单。title } }/span

　　/El-菜单项

　　！-有多级菜单-

　　埃尔-子菜单v-if=navMenu.children

　　:key=navMenu.key

　　:index=n

　　模板槽=标题

　　i :class=navMenu.icon/i

　　span {{navMenu.title}}/span

　　/模板

　　！-递归组件，把遍历的值传回子组件，完成递归调用-

　　导航菜单：导航菜单=导航菜单。子菜单/导航菜单

　　/El-子菜单

　　/标签

　　/div

　　/模板

　　脚本

　　导出默认值{

　　名称： NavMenu ，//使用递归组件必须要有

　　props: [navMenus]，//传入子组件的数据

　　data() {

　　返回{}

　　},

　　方法：{

　　handleSelect(key，keyPath){

　　console.log(1212 )

　　console.log(key，keyPath)

　　}

　　}

　　}

　　/脚本

　　样式范围

　　/风格

　　加个路由

　　从导入用户2./views/User2.vue

　　{

　　路径："/用户2 "，

　　姓名："用户2",

　　元：{标题：用户管理2},

　　组件：用户2

　　},

　　现在：

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

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。