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 相关文章推荐
鼠标图片振动代码
Jul 06 Javascript
基于jQuery的试卷自动排版系统实现代码
Jan 06 Javascript
使用GruntJS构建Web程序之合并压缩篇
Jun 06 Javascript
javascript鼠标滑过显示二级菜单特效
Nov 18 Javascript
jQuery实现鼠标滑过图片移动特效
Dec 08 Javascript
js实现固定宽高滑动轮播图效果
Jan 13 Javascript
原生JS京东轮播图代码
Mar 22 Javascript
Javascript实现一朵从含苞到绽放的玫瑰
Mar 30 Javascript
JavaScript实现五子棋游戏的方法详解
Jul 08 Javascript
js动态获取时间的方法分析
Aug 02 Javascript
Vue中axios的封装(报错、鉴权、跳转、拦截、提示)
Aug 20 Javascript
uniapp微信小程序实现一个页面多个倒计时
Nov 01 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 setcookie() cannot modify header information 的解决方法
2009/01/09 PHP
php 判断网页是否是utf8编码的方法
2014/06/06 PHP
php中fsockopen用法实例
2015/01/05 PHP
php中 $$str 中 &quot;$$&quot; 的详解
2015/07/06 PHP
TP5框架安全机制实例分析
2020/04/05 PHP
JQuery 简便实现页面元素数据验证功能
2007/03/24 Javascript
event对象获取方法总结在google浏览器下测试
2013/11/03 Javascript
自己用jQuery写了一个图片的马赛克消失效果
2014/05/04 Javascript
location.hash保存页面状态的技巧
2016/04/28 Javascript
DWR中各种java方法的调用
2016/05/04 Javascript
微信小程序 canvas API详解及实例代码
2016/10/08 Javascript
jquery组件WebUploader文件上传用法详解
2020/10/23 Javascript
JS实现灯泡开关特效
2020/03/30 Javascript
[01:21]辉夜杯战队访谈宣传片—CDEC
2015/12/25 DOTA
分析用Python脚本关闭文件操作的机制
2015/06/28 Python
python3.5使用tkinter制作记事本
2016/06/20 Python
python logging重复记录日志问题的解决方法
2018/07/12 Python
浅谈Python的list中的选取范围
2018/11/12 Python
python 处理数字,把大于上限的数字置零实现方法
2019/01/28 Python
python set内置函数的具体使用
2019/07/02 Python
Tensorflow卷积实现原理+手写python代码实现卷积教程
2020/05/22 Python
基于python实现操作git过程代码解析
2020/07/27 Python
温泉秘密:Onsen Secret
2020/07/06 全球购物
限量版运动鞋和街头服饰:TheDrop
2020/09/06 全球购物
维德科技C#面试题笔试题
2015/12/09 面试题
总经理驾驶员岗位职责
2013/12/04 职场文书
写给学生的新学期寄语
2014/01/18 职场文书
家长对孩子评语
2014/01/30 职场文书
幼儿园五一活动方案
2014/02/07 职场文书
四风存在的原因分析
2014/02/11 职场文书
会议主持词
2014/03/17 职场文书
财务会计专业求职信
2014/06/09 职场文书
2014医学院领导干部四风对照检查材料思想汇报
2014/09/16 职场文书
小学英语复习计划
2015/01/19 职场文书
安全教育培训制度
2015/08/06 职场文书
Java设计模式中的命令模式
2022/04/28 Java/Android