vue侧边栏动态生成下级菜单的方法


Posted in Javascript onSeptember 07, 2018

循环传入的数据去生成下级菜单

<template>
 <div class="headBar">
 <div class="title">
  微商城管理后台
 </div>
 <el-menu
  class="el-menu-headBar"
  mode="horizontal"
  @select="handleSelect"
  background-color="#000000"
  text-color="#fff"
  active-text-color="#ffd04b"
  :unique-opened="true"
  :default-active="onRoutes" router>
  <template v-for="item in items" >
  <template v-if="item.subs" >
   <el-submenu :index="item.index">
   <template slot="title" >
    {{item.title}}
   </template>
   <el-menu-item v-for="(subItem,i) in item.subs" :key="i" :index="subItem.index">
    {{ subItem.title }}
   </el-menu-item>
   </el-submenu>
  </template>
  <template v-else>
   <el-menu-item :index="item.index">
   <label>{{ item.title }}</label>
   </el-menu-item>
  </template>
  </template>
 </el-menu>
 </div>
</template>
 
<script>
 export default {
 data() {
  return {
  activeIndex: "1",
  items: [
   {
   icon: 'el-icon-menu',
   index: '1',
   title: '数据统计',
   subs: [
    {
    index: '/monitor',
    title: '客流展示'
    },
    {
    index: '/monitor/device',
    title: '设备采集'
    },
    {
    index: '/monitor/tv',
    title: '监控视频'
    }
   ]
   },{
   icon: 'el-icon-goods',
   index: '/product',
   title: '商品管理',
   },{
   icon: 'el-icon-goods',
   index: '/category',
   title: '类目管理',
   },{
   icon: 'fa fa-cart-arrow-down',
   index: '/order',
   title: '订单一览'
   },{
   icon: 'fa fa-user-o',
   index: '/merchant',
   title: '商家信息'
   },{
   icon: 'el-icon-printer',
   index: '9',
   title: '微商城',
   subs:[
    {
    icon: 'el-icon-printer',
    index: '/banner',
    title: 'banner设置'
    },{
    icon: 'el-icon-printer',
    index: '/decoration',
    title: '首页装修'
    },{
    icon: 'el-icon-printer',
    index: '/message',
    title: '消息设置'
    }
   ]
   },{
   icon: 'el-icon-printer',
   index: '10',
   title: '线下店',
   subs:[
    {
    icon: 'el-icon-printer',
    index: '/device',
    title: '设备管理'
    },{
    icon: 'el-icon-printer',
    index: '/advertise',
    title: '广告管理'
    },{
    icon: 'el-icon-printer',
    index: '/version',
    title: '版本管理'
    }
   ]
   },{
   icon: 'el-icon-printer',
   index: '/largeUI',
   title: '大屏'
   },{
   icon: 'el-icon-printer',
   index: '/coupon',
   title: '优惠券'
   }
  ],
  }
 },
 methods: {
  handleSelect(key, keyPath) {
  console.log(key, keyPath);
  }
 },
 computed:{
  onRoutes(){
  return this.$route.path.replace('/','');
  }
 }
 }
</script>
 
<style scoped>
 .el-menu-headBar {
 width: 80%;
 min-width: 950px;
 font-size: 12px;
 border-bottom: 1px #000000;
 }
 
 .headBar {
 width: 100%;
 height: 50px;
 display: flex;
 background-color: #000000;
 }
 
 .title {
 background-color: #ffdb15;
 color: #000;
 height: 100%;
 min-width: 200px;
 width: 200px;
 display: flex;
 justify-content: center;
 align-items: center;
 letter-spacing: 5px;
 font-size: 17px;
 }
</style>

以上这篇vue侧边栏动态生成下级菜单的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
不要在cookie中使用特殊字符的原因分析
Jul 13 Javascript
js获取height和width的方法说明
Jan 06 Javascript
javascript使用window.open提示“已经计划系统关机”的原因
Aug 15 Javascript
jQuery中filter()方法用法实例
Jan 06 Javascript
javascript+css3 实现动态按钮菜单特效
Feb 06 Javascript
Node.js 条形码识别程序构建思路详解
Feb 14 Javascript
基于bootstrap插件实现autocomplete自动完成表单
May 07 Javascript
多种方式实现js图片预览
Dec 12 Javascript
JS ES6多行字符串与连接字符串的表示方法
Apr 26 Javascript
小发现之浅谈location.search与location.hash的问题
Jun 23 Javascript
vue router2.0二级路由的简单使用
Jul 05 Javascript
微信小程序实现页面跳转传递参数(实体,对象)
Aug 12 Javascript
Vuejs开发环境搭建及热更新【推荐】
Sep 07 #Javascript
小程序点赞收藏功能的实现代码示例
Sep 07 #Javascript
前端防止用户重复提交js实现代码示例
Sep 07 #Javascript
vue实现打印功能的两种方法
Sep 07 #Javascript
使用Angular-CLI构建NPM包的方法
Sep 07 #Javascript
详解如何构建一个Angular6的第三方npm包
Sep 07 #Javascript
vue2.0 可折叠列表 v-for循环展示的实例
Sep 07 #Javascript
You might like
PHP网页游戏学习之Xnova(ogame)源码解读(十一)
2014/06/25 PHP
PHP图片自动裁切应付不同尺寸的显示
2014/10/16 PHP
jQuery 获取、设置HTML或TEXT内容的两种方法
2014/05/23 Javascript
搭建pomelo 开发环境
2014/06/24 Javascript
jQuery中prevUntil()方法用法实例
2015/01/08 Javascript
js结合正则实现国内手机号段校验
2015/06/19 Javascript
浅析Bootstrip的select控件绑定数据的问题
2016/05/10 Javascript
全面解析Bootstrap中transition、affix的使用方法
2016/05/30 Javascript
最简单纯JavaScript实现Tab标签页切换的方式(推荐)
2016/07/25 Javascript
jquery实现界面无刷新加载登陆注册
2016/07/30 Javascript
JS简单生成随机数(随机密码)的方法
2017/05/11 Javascript
关于Stream和Buffer的相互转换详解
2017/07/26 Javascript
javascript基于定时器实现进度条功能实例
2017/10/13 Javascript
vue实现样式之间的切换及vue动态样式的实现方法
2017/12/19 Javascript
react-native动态切换tab组件的方法
2018/07/07 Javascript
angularJs使用ng-repeat遍历后选中某一个的方法
2018/09/30 Javascript
vue进入页面时不在顶部,检测滚动返回顶部按钮问题及解决方法
2019/10/30 Javascript
JS自定义对象创建与简单使用方法示例
2020/01/15 Javascript
vue-video-player视频播放器使用配置详解
2020/10/23 Javascript
Django中几种重定向方法
2015/04/28 Python
Python求算数平方根和约数的方法汇总
2016/03/09 Python
Python中函数及默认参数的定义与调用操作实例分析
2017/07/25 Python
Python内置函数 next的具体使用方法
2017/11/24 Python
Python读取mat文件,并转为csv文件的实例
2018/07/04 Python
python微信好友数据分析详解
2018/11/19 Python
需要知道的CSS3动画技术
2010/01/01 HTML / CSS
List, Set, Map是否继承自Collection接口?
2016/05/16 面试题
介绍一下gcc特性
2015/10/31 面试题
主治医师岗位职责
2013/12/10 职场文书
市政施工员自我鉴定
2014/01/15 职场文书
网络技术专业推荐信
2014/02/20 职场文书
幼儿园植树节活动总结
2014/07/04 职场文书
2014年机关作风建设工作总结
2014/10/23 职场文书
nginx常用命令放入shell脚本详解
2021/03/31 Servers
Spring Boot两种全局配置和两种注解的操作方法
2021/06/29 Java/Android
业余无线电通联Q语
2022/02/18 无线电