vue导航栏部分的动态渲染实例_vue左侧菜单栏右侧动态渲染,vue导航栏案例资源-CSDN文库

alias

vue

123 浏览量 2020-12-13 12:52:59 上传评论收藏 60KB PDF 举报

资源详情

资源评论

资源推荐

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

根据公司项目的需求，使用的是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">

<span slot='title'>{{item.alias}}</span>

</template>

<el-submenu v-if='item1.childs' v-for= '(item1, index) in item.childs' :key='item1.name' :index='item1.name' :route='item1.value'>

<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'>

<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'>

<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'>

<span slot='title'>{{item.alias}}</span>

</el-menu-item>

</el-menu>

数据部分：数据部分：

navMenu: [{

icon: 'iconfont icon-shezhi',

alias: '金融服务目录',

value: '',

childs: [

{

icon: '',

alias: '渠道管理',

value: '',

childs: [

{

icon: '',

alias: '渠道内部管理',

value: '',

childs: [

{

icon: '',

alias: '金融类',

value: '/serveManage/financial',

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余2页未读，立即下载

评论收藏

内容反馈

weixin_38538381

粉丝: 6
资源: 907

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

评论0

最新资源

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

评论0

vue动态渲染svg、添加点击事件的实现

详解VUE Element-UI多级菜单动态渲染的组件

vue开发实例

vue实现导航栏效果（选中状态刷新不消失）

vue.js实现条件渲染的实例代码

vue服务端渲染的实例代码

vue设置导航栏、侧边栏为公共页面的例子

vue.js,ajax渲染页面的实例

vue element 中的table动态渲染实现（动态表头）

vue+iview框架实现左侧动态菜单功能的示例代码

vue-admin-template配置快捷导航的代码（标签导航栏）

Vue实现导航栏的显示开关控制

vue基础底部路由底部导航栏小案例.zip

vue实现侧边栏导航效果

vue实现nav导航栏的方法

vue实现局部刷新的实现示例

vue2.0 elementUI制作面包屑导航栏

Vue 动态添加路由及生成菜单的方法示例

vue实现后台管理权限系统及顶栏三级菜单显示功能

响应式导航栏.zip

Vue实现导航栏菜单

unigui左侧导航栏js框架

vue.js实现左边导航切换右边内容

Qt 5实现串口调试助手 （源工程文件、0积分下载）

【SystemVerilog】路科验证V2学习笔记（全600页）.pdf

最新资源

Qt 5实现串口调试助手（源工程文件、0积分下载）