vue导航栏部分的动态渲染实例


Posted in Javascript onNovember 01, 2019

根据公司项目的需求,使用的是element-ui的nav-menu组件实现动态渲染左侧导航条的功能,这里我只写到了四级菜单。

代码部分:

<el-menu class='el-menu-vertical-demo' :router='true' v-for='(item, index) in navMenu' :key='index'>
  <el-submenu v-if='item.childs' :index='item.name' :route = 'item.value' class='edit_wrapper' @mouseover.native="overShow" @mouseout.native="outHide">
  <template slot='title'>
   <i :class='item.icon'></i>
   <span slot='title'>{{item.alias}}</span>
   <i class='iconfont icon-shenpi edit' v-show='haha'></i>
  </template>
  <el-submenu v-if='item1.childs' v-for= '(item1, index) in item.childs' :key='item1.name' :index='item1.name' :route='item1.value'>
   <template slot='title'>
   <i :class='item1.icon'></i>
   <span slot='title'>{{item1.alias}}</span>
   </template>
   <el-submenu v-for= '(item2, index) in item1.childs' :key='item2.name' v-if='item2.childs' :index='item2.name' :route = 'item2.value'>
   <template slot='title'>
    <i :class='item2.icon'></i>
    <span slot='title'>{{item2.alias}}</span>
   </template>
   <el-submenu v-for= '(item3, index) in item2.childs' :key='item3.name' v-if='item3.childs' ::index='item3.name' :route = 'item3.value'>
    <template slot='title'>
    <i :class='item3.icon'></i>
    <span slot='title'>{{item3.alias}}</span>
    </template>
    <el-menu-item v-for= '(item4, index) in item3.childs' :key='item3.name' v-if='item4.childs == null' :index='item4.name' :route = 'item4.value'>
    <span>{{item4.alias}}</span>
    </el-menu-item>
   </el-submenu>
   <el-menu-item v-for= '(item3, index) in item2.childs' :key='item3.name' v-if='item3.childs == null' :index='item3.name' :route = 'item3.value'>
    <span>{{item3.alias}}</span>
   </el-menu-item>
   </el-submenu>
   <el-menu-item v-for= '(item2, index) in item1.childs' :key='item2.name' v-if='item2.childs == null' :index='item2.name' :route = 'item2.value'>
   <span>{{item2.alias}}</span>
   </el-menu-item>
  </el-submenu>
  <el-menu-item v-for= '(item1, index) in item.childs' :key='item1.name' v-if='item1.childs == null' :index='item1.name' :route = 'item1.value'>
   <span>{{item1.alias}}</span>
  </el-menu-item>
  </el-submenu>
  <el-menu-item v-if='item.childs == null' :index='item.name' :route = 'item.value'>
  <i :class='item.icon'></i>
  <span slot='title'>{{item.alias}}</span>
  </el-menu-item>
  </el-menu>

数据部分:

navMenu: [{
  name: 'serveList',
  icon: 'iconfont icon-shezhi',
  alias: '金融服务目录',
  value: '',
  childs: [
  {
  name: 'channelManage',
  icon: '',
  alias: '渠道管理',
  value: '',
  childs: [
  {
   name: 'channelManage_in',
   icon: '',
   alias: '渠道内部管理',
   value: '',
   childs: [
   {
   name: 'financial',
   icon: '',
   alias: '金融类',
   value: '/serveManage/financial',
   },
   {
   name: 'no_financial',
   icon: '',
   alias: '非金融类',
   value: '/serveManage/no_financial',
   },
   {
   name: 'query_class',
   icon: '',
   alias: '查询类',
   value: '/serveManage/query_class',
   },
   {
   name: 'square_class',
   icon: '',
   alias: '冲正类',
   value: '/serveManage/square_class',
   },
   ]
  },
  {
   name: 'process_services',
   icon: '',
   alias: '流程服务',
   value: '/serveManage/process_services'
  },
  {
   name: 'cooperation_services',
   icon: '',
   alias: '合作方服务',
   value: '/serveManage/cooperation_services'
  },
  ]
  },
  {
  name: 'saveManage',
  icon: '',
  alias: '风险管理',
  value: '/serveManage/saveManage'
  }, {
  name: 'manageDecision',
  icon: '',
  alias: '管理决策',
  value: '/serveManage/manageDecision'
  }, {
  name: 'businessSupport',
  icon: '',
  alias: '业务支持',
  value: '/serveManage/businessSupport'
  }, {
  name: 'technicalSupport',
  icon: '',
  alias: '技术支持',
  value: '/serveManage/technicalSupport'
  }
  ]
 }, {
  name: 'serveRelation',
  icon: 'iconfont icon-shezhi',
  alias: '服务血缘关系',
  value: '/serveManage/serveRelation'
 }]

注意:因为含有childs的目录是没有路由的,所以可以把它的value值设为空。

效果展示:

vue导航栏部分的动态渲染实例

这样我们就可以在其他页面引入该组件就可以了。

以上这篇vue导航栏部分的动态渲染实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 写类方式之八
Jul 05 Javascript
Prototype ObjectRange对象学习
Jul 19 Javascript
Jquery增加鼠标中间功能mousewheel的实例代码
Sep 05 Javascript
一个非常全面的javascript URL解析函数和分段URL解析方法
Apr 12 Javascript
jquery新的绑定事件机制on方法的使用方法
Apr 15 Javascript
js中的cookie的读写操作示例详解
Apr 17 Javascript
基于JavaScript实现移动端点击图片查看大图点击大图隐藏
Nov 04 Javascript
Angular实现的日程表功能【可添加及隐藏显示内容】
Dec 27 Javascript
angular 实现同步验证器跨字段验证的方法
Apr 11 Javascript
监控微信小程序中的慢HTTP请求过程详解
Jul 05 Javascript
js实现随机点名器精简版
Jun 29 Javascript
vue任意关系组件通信与跨组件监听状态vue-communication
Oct 18 Javascript
微信小程序自定义tabbar custom-tab-bar 6s出不来解决方案(cover-view不兼容)
Nov 01 #Javascript
Vue-cli项目部署到Nginx服务器的方法
Nov 01 #Javascript
浅谈vue-router路由切换 组件重用挖下的坑
Nov 01 #Javascript
浅析js实现网页截图的两种方式
Nov 01 #Javascript
javascript使用链接跨域下载图片
Nov 01 #Javascript
async/await让异步操作同步执行的方法详解
Nov 01 #Javascript
浅谈Three.js截图并下载的大坑
Nov 01 #Javascript
You might like
[原创]PHP中通过ADODB库实现调用Access数据库之修正版本
2006/12/31 PHP
给WordPress的编辑后台添加提示框的代码实例分享
2015/12/25 PHP
php简单构造json多维数组的方法示例
2017/06/08 PHP
PHP实现函数内修改外部变量值的方法示例
2018/12/28 PHP
php两点地理坐标距离的计算方法
2018/12/29 PHP
php输出控制函数和输出函数生成静态页面
2019/06/27 PHP
自定义Laravel (monolog)日志位置,并增加请求ID的实现
2019/10/17 PHP
用javascript获得地址栏参数的两种方法
2006/11/08 Javascript
jquery 框架使用教程 AJAX篇
2009/10/11 Javascript
Web开发者必备的12款超赞jQuery插件
2010/12/03 Javascript
javascript中的继承实例代码
2011/04/27 Javascript
使用JS CSS去除IE链接虚线框的三种方法
2013/11/14 Javascript
原生js结合html5制作小飞龙的简易跳球
2015/03/30 Javascript
jquery实现列表上下移动功能
2016/02/25 Javascript
Javascript中的数组常用方法解析
2016/06/17 Javascript
AngularJS入门教程之迭代器过滤详解
2016/08/18 Javascript
node.js爬虫爬取拉勾网职位信息
2017/03/14 Javascript
JS+HTML5实现图片在线预览功能
2017/07/22 Javascript
使用JS组件实现带ToolTip验证框的实例代码
2017/08/23 Javascript
jQuery中DOM操作原则实例分析
2019/08/01 jQuery
JS面向对象编程——ES6 中class的继承用法详解
2020/03/03 Javascript
Vue 样式切换及三元判断样式关联操作
2020/08/09 Javascript
Python实现抓取页面上链接的简单爬虫分享
2015/01/21 Python
Python实现比较扑克牌大小程序代码示例
2017/12/06 Python
基于python log取对数详解
2018/06/08 Python
Python中遍历列表的方法总结
2019/06/27 Python
pytorch 自定义参数不更新方式
2020/01/06 Python
解决jupyter notebook import error但是命令提示符import正常的问题
2020/04/15 Python
金牌葡萄酒俱乐部:Gold Medal Wine Club
2017/11/02 全球购物
旅游网创业计划书
2014/01/31 职场文书
外贸专业求职信
2014/03/09 职场文书
大学生社会实践活动总结
2014/07/03 职场文书
运动会广播稿100字
2014/09/14 职场文书
乡党政领导班子群众路线教育实践活动个人对照检查材料
2014/09/20 职场文书
文员岗位职责
2015/02/04 职场文书
教你如何使用Python实现二叉树结构及三种遍历
2021/06/18 Python