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 相关文章推荐
jQuery 学习 几种常用方法
Jun 11 Javascript
JavaScript 在网页上单击鼠标的地方显示层及关闭层
Dec 30 Javascript
使用闭包对setTimeout进行简单封装避免出错
Jul 10 Javascript
js中的hasOwnProperty和isPrototypeOf方法使用实例
Jun 06 Javascript
jQuery功能函数详解
Feb 01 Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
Jan 18 Javascript
JS组件Bootstrap按钮组与下拉按钮详解
May 10 Javascript
JS获取checkbox的个数简单实例
Aug 19 Javascript
JavaScript实现三级联动菜单实例代码
Jun 26 Javascript
bootstrap可编辑下拉框jquery.editable-select
Oct 12 jQuery
jQuery实现滑动开关效果
Aug 02 jQuery
antd 表格列宽自适应方法以及错误处理操作
Oct 27 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系统流量分析的程序
2006/10/09 PHP
php ImageMagick windows下安装教程
2015/01/26 PHP
javascript编程起步(第二课)
2007/02/27 Javascript
JS 显示当前日期与时间的代码
2010/03/24 Javascript
firebug的一个有趣现象介绍
2011/11/30 Javascript
jQuery.extend 函数的详细用法
2012/06/27 Javascript
jQuery使用技巧简单汇总
2013/04/18 Javascript
Bootstrap jquery.twbsPagination.js动态页码分页实例代码
2017/02/20 Javascript
详解如何在NodeJS项目中优雅的使用ES6
2017/04/22 NodeJs
ES6中的rest参数与扩展运算符详解
2017/07/18 Javascript
使用JavaScript进行表单校验功能
2017/08/01 Javascript
最全正则表达式总结:验证QQ号、手机号、Email、中文、邮编、身份证、IP地址等
2017/08/16 Javascript
js中apply()和call()的区别与用法实例分析
2018/08/14 Javascript
vue实现条件叠加搜索的解决方法
2019/05/28 Javascript
vue.js页面加载执行created,mounted的先后顺序说明
2020/11/07 Javascript
[01:06:54]DOTA2-DPC中国联赛 正赛 RNG vs Dragon BO3 第一场 1月24日
2021/03/11 DOTA
Python网络编程 Python套接字编程
2017/09/13 Python
Python编程pygal绘图实例之XY线
2017/12/09 Python
Python爬虫动态ip代理防止被封的方法
2019/07/07 Python
浅谈python3中input输入的使用
2019/08/02 Python
如何清空python的变量
2020/07/05 Python
关于python3.7安装matplotlib始终无法成功的问题的解决
2020/07/28 Python
python自动化测试三部曲之request+django实现接口测试
2020/10/07 Python
印度排名第一的蛋糕、鲜花和礼品送货:Winni
2019/08/02 全球购物
请介绍一下WSDL的文档结构
2013/03/17 面试题
单位消防安全制度
2014/01/12 职场文书
致跳远运动员加油稿
2014/02/11 职场文书
机关领导干部作风整顿整改措施
2014/09/19 职场文书
销售员态度差检讨书
2014/10/26 职场文书
2014年学生会干事工作总结
2014/11/07 职场文书
电影圆明园观后感
2015/06/03 职场文书
返乡农民工证明
2015/06/24 职场文书
教师学习中国梦心得体会
2016/01/05 职场文书
小学英语新课改心得体会
2016/01/22 职场文书
pytorch 6 batch_train 批训练操作
2021/05/28 Python
Redis集群的关闭与重启操作
2021/07/07 Redis