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 相关文章推荐
Jquery 数组操作大全个人总结
Nov 13 Javascript
JS获取DropDownList的value值与text值的示例代码
Jan 07 Javascript
基于Jquery实现键盘按键监听
May 11 Javascript
推荐 21 款优秀的高性能 Node.js 开发框架
Aug 18 Javascript
node.js中的forEach()是同步还是异步呢
Jan 29 Javascript
js实现瀑布流效果(自动生成新的内容)
Mar 16 Javascript
JavaScript实现获取远程的html到当前页面中
Mar 26 Javascript
JavaScript实现写入文件到本地的方法【基于FileSaver.js插件】
Mar 15 Javascript
vue中axios实现数据交互与跨域问题
May 12 Javascript
如何在Angular8.0下使用ngx-translate进行国际化配置
Jul 24 Javascript
layui实现数据表格隐藏列的示例
Oct 25 Javascript
JS实现手写 forEach算法示例
Apr 29 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
APMServ使用说明
2006/10/23 PHP
php批量缩放图片的代码[ini参数控制]
2011/02/11 PHP
PHP实现自动登入google play下载app report的方法
2014/09/23 PHP
php调用mysql存储过程实例分析
2014/12/29 PHP
PHP实现将textarea的值根据回车换行拆分至数组
2015/06/10 PHP
PHP新特性之字节码缓存和内置服务器
2017/08/11 PHP
Aster vs Newbee BO5 第一场2.19
2021/03/10 DOTA
兼容ie和firefox js关闭代码
2008/12/11 Javascript
20个非常棒的Jquery实用工具 国外文章
2010/01/01 Javascript
jquery之empty()与remove()区别说明
2010/09/10 Javascript
基于jQuery实现的当离开页面时出现提示的实现代码
2011/06/27 Javascript
JS判断两个时间大小的示例代码
2014/01/28 Javascript
通过Javascript读取本地Excel文件内容的代码示例
2014/04/08 Javascript
jQuery制作简洁的图片轮播效果
2015/04/03 Javascript
在React框架中实现一些AngularJS中ng指令的例子
2016/03/06 Javascript
angular2 ng2 @input和@output理解及示例
2017/10/10 Javascript
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
2018/01/17 Javascript
JS实现字符串翻转的方法分析
2018/08/31 Javascript
8个有意思的JavaScript面试题
2019/07/30 Javascript
vue实现直播间点赞飘心效果的示例代码
2019/09/20 Javascript
django中的setting最佳配置小结
2017/11/21 Python
Python机器学习算法之k均值聚类(k-means)
2018/02/23 Python
TensorFlow实现AutoEncoder自编码器
2018/03/09 Python
python代码 FTP备份交换机配置脚本实例解析
2019/08/01 Python
python 根据网易云歌曲的ID 直接下载歌曲的实例
2019/08/24 Python
几款好用的python工具库(小结)
2020/10/20 Python
params有什么用
2016/03/01 面试题
干部现实表现材料
2014/02/13 职场文书
预备党员2014全国两会学习心得体会
2014/03/10 职场文书
预备党员表决心书
2014/03/11 职场文书
荷叶母亲教学反思
2014/04/30 职场文书
公司爱心捐款倡议书
2014/05/14 职场文书
维修工先进事迹
2014/05/29 职场文书
高中教师个人总结
2015/02/10 职场文书
演讲开场白台词大全
2015/05/29 职场文书
浅谈node.js中间件有哪些类型
2021/04/29 Javascript