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 相关文章推荐
获取DOM对象的几种扩展及简写
Oct 09 Javascript
JS处理VBArray的函数使用说明
May 11 Javascript
FF火狐下获取一个元素同类型的相邻元素实现代码
Dec 15 Javascript
jQuery实现div浮动层跟随页面滚动效果
Feb 11 Javascript
JavaScript中的this到底是什么(一)
Dec 09 Javascript
js拖拽的原型声明和用法总结
Apr 04 Javascript
JavaScript遍历求解数独问题的主要思路小结
Jun 12 Javascript
详解如何webpack使用DllPlugin
Sep 30 Javascript
了解javascript中let和var及const关键字的区别
May 24 Javascript
vue集成chart.js的实现方法
Aug 20 Javascript
JavaScript基于用户照片姓名生成海报
May 29 Javascript
vue-video-player 断点续播的实现
Feb 01 Vue.js
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 输出URL的快捷方式示例代码
2013/09/22 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(八)
2014/06/23 PHP
php函数serialize()与unserialize()用法实例
2014/11/06 PHP
微信支付开发订单查询实例
2016/07/12 PHP
基于PHP实现发微博动态代码实例
2020/12/11 PHP
json2.js的初步学习与了解
2011/10/06 Javascript
js实现select组件的选择输入过滤代码
2014/10/14 Javascript
javascript图片预加载完整实例
2015/12/10 Javascript
js实现文本框输入文字个数限制代码
2015/12/25 Javascript
基于jQuery Ajax实现上传文件
2016/03/24 Javascript
js实现百度登录框鼠标拖拽效果
2017/03/07 Javascript
详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0
2017/05/22 Javascript
JS 学习总结之正则表达式的懒惰性和贪婪性
2017/07/03 Javascript
JS获取字符对应的ASCII码实例
2017/09/10 Javascript
vue做网页开场视频的实例代码
2017/10/20 Javascript
react-router v4如何使用history控制路由跳转详解
2018/01/09 Javascript
vue使用better-scroll实现下拉刷新、上拉加载
2018/11/23 Javascript
通过jQuery学习js类型判断的技巧
2019/05/27 jQuery
vue.js购物车添加商品组件的方法
2019/09/17 Javascript
使用纯前端JavaScript实现Excel导入导出方法过程详解
2020/08/07 Javascript
微信小程序实现身份证取景框拍摄
2020/09/09 Javascript
[01:20]DOTA2更新全新英雄 天涯墨客现已加入游戏
2018/08/25 DOTA
[41:17]完美世界DOTA2联赛PWL S3 access vs CPG 第二场 12.13
2020/12/17 DOTA
[01:11:21]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第三场 3月7日
2021/03/11 DOTA
举例详解Python中的split()函数的使用方法
2015/04/07 Python
利用python操作SQLite数据库及文件操作详解
2017/09/22 Python
使用Python实现从各个子文件夹中复制指定文件的方法
2018/10/25 Python
tensorflow之并行读入数据详解
2020/02/05 Python
HTML5、Select下拉框右边加图标的实现代码(增进用户体验)
2017/10/16 HTML / CSS
毕业生自我推荐
2013/11/04 职场文书
家教广告词
2014/03/19 职场文书
大一新生学期自我评价
2014/04/09 职场文书
2014年端午节演讲稿范文
2014/05/23 职场文书
三月学雷锋活动总结
2014/06/26 职场文书
导游词之茶卡盐湖
2019/11/26 职场文书
你真的了解redis为什么要提供pipeline功能
2021/06/22 Redis