vue.js+element-ui动态配置菜单的实例

如下所示：

<!--导航菜单-折叠功能-->
<aside :class="collapsed?‘menu-collapsed‘:‘menu-expanded‘">
<!--单个激活 并以 index 作为 path 进行路由跳转-->
<el-menu unique-opened router v-show="!collapsed">
<!--动态路由到子组件 将不可见的路径隐藏-->
<template v-for="(item,index) in $router.options.routes" v-if="!item.hidden">
<el-submenu :index="index+‘‘" v-if="!item.leaf">
<!--用el ui 的title进行solt分发菜单-->
<template slot="title"><i :class="item.iconCls"></i>{{item.name}}</template>
<!--item.name和item.children.name来配置菜单栏和子菜单栏的名称-->
<el-menu-item v-for="child in item.children" :index="child.path" :key="child.path" v-if="!child.hidden">{{child.name}}</el-menu-item>
</el-submenu>
<el-menu-item v-if="item.leaf&&item.children.length>0" :index="item.children[0].path"><i :class="item.iconCls"></i>{{item.children[0].name}}</el-menu-item>
</template>
</el-menu>

以上这篇vue.js+element-ui动态配置菜单的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • element-ui 设置菜单栏展开的方法

    element-ui 侧边栏默认要全部展开怎么做? element-ui文档中是这么写的 default-openeds 当前打开的sub-menu的key数组 给<el-menu></el-menu>标签加上这个属性 <el-menu class="el-menu-vertical" @open="handleOpen" @close="handleClose" theme="dark" :de

  • vue+element-ui动态生成多级表头的方法

    vue+element html配置: <div id="table">{{tableData}} <el-table :data="tabledata01" :span-method="tableSpanMethod" max-height="420"> <el-table-column v-for='item in tableConfig' :label="item.label&qu

  • vue-router配合ElementUI实现导航的实例

    在每个项目中路由是不可或缺的,最近学习vue-router和ElementUI配合使用实现导航栏,在学习的过程中遇到一个问题:点击浏览器的刷新之后页面停留在原来的位置,但是导航却是默认第一个. 由于接触前端时间不长,对于路由的概念不是特别清楚,按照文档写了之后完全不知道怎么下手了,请教了同事,同事的解决办法是利用vuex管理,但是vuex这块还没有接触过,所以这个问题就一直搁置了,今天周末自己在家学习偶然直到了可以使用$route.path设置默认选中的导航,但是设置之后没有什么效果,刷新时页面

  • 使用Vue.js和Element-UI做一个简单登录页面的实例

    最近了解到Vue.js挺火的,有同学已经学习了,那我心里痒痒的也学习了一点,然后也学了一点Element组件,就做了简单的登录页面. 效果很简单: 代码如下: 前端页面 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="stylesheet" hr

  • vue.js与element-ui实现菜单树形结构的解决方法

    由于业务需要,要求实现树形菜单,且菜单数据由后台返回,在网上找了几篇文章,看下来总算有了解决办法. 场景:根据业务要求,需要实现活动的树形菜单,菜单数据由后台返回,最后的效果图如下: 后台返回的数据格式是这个样子的: data=[{ pID:'1',//父ID name:'目录一', menuID:'m1',//本身ID isContent:false//判断是否是目录 }, { pID:'1', name:'目录二', menuID:'m2', isContent:false }, { pID

  • vue.js+element-ui动态配置菜单的实例

    如下所示: <!--导航菜单-折叠功能--> <aside :class="collapsed?'menu-collapsed':'menu-expanded'"> <!--单个激活 并以 index 作为 path 进行路由跳转--> <el-menu unique-opened router v-show="!collapsed"> <!--动态路由到子组件 将不可见的路径隐藏--> <templ

  • Vue.js 递归组件实现树形菜单（实例分享）

    Vue.js 递归组件实现树形菜单（实例分享）

    最近看了 Vue.js 的递归组件,实现了一个最基本的树形菜单. 项目结构: main.js 作为入口,很简单: import Vue from 'vue' Vue.config.debug = true import main from './components/main.vue' new Vue({ el: '#app', render: h => h(main) }) 它引入了一个组件 main.vue: <template> <div class="tree-m

  • Vue.js递归组件构建树形菜单

    Vue.js递归组件构建树形菜单

    在Vue.js中一个递归组件调用的是其本身,如: Vue.component('recursive-component', { template: `<!--Invoking myself!--> <recursive-component></recursive-component> }); 递归组件常用于在blog上显示注释.嵌套的菜单,或者基本上是父和子相同的类型,尽管具体内容不同.例如: 现在给您演示一下如何有效地使用递归组件,我将通过建立一个可扩展/收缩的树形菜

  • vue项目element UI input框扫码枪扫描过快出现数据丢失问题及解决方案

    目录 项目需求: 解决方案探索 错误代码: 问题就出在 解决方法 完整代码 如下 项目需求: 输入框要掉两个接口,根据第一个验证接口返回的code,弹不同的框,点击弹框确认再掉第二个接口 根据客户现场反应,扫描枪快速扫描会出现 料号前几位字符丢失 不完整的问题.于是开始了测试之路. 解决方案探索 1.首先考虑 ,可能是因为扫描过快,服务端接口还没返回过来,输入框就已经清空了值 导致条码有丢失字符的现象,所以我这边做了一个缓存,将输入框的值存到一个数组中去,定时上传到接口. [x]2.考虑到可能是

  • Vue.js 实现微信公众号菜单编辑器功能(一)

    学习一段时间Vue.js,于是想尝试着做一个像微信平台里那样的菜单编辑器,在这里分享下 具体样式代码查看项目github 创建一个vue实例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.bootcss.com/vue/2.5.9/vue.js"&g

  • vue.js 实现输入框动态添加功能

    代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>vue-demo</title> </head> <body> &

  • vue.js实现点击后动态添加class及删除同级class的实现代码

    vue.js实现点击后动态添加class及删除同级class的实现代码

    最近使用vue需要实现一个点餐选择商品规格的页面,需要通过vue动态的给被点击的元素添加class名字,使其变色,其他的删除class.如图: 开始在网上找了许多办法发现不是太好用,最后找到一个发现还是不错的,记录一下 html: <div class="weui-mask" id="guige"> <div class="guigeBox"> <p class="guigeTitle">{

  • Vue.js 实现微信公众号菜单编辑器功能(二)

    Vue.js 实现微信公众号菜单编辑器功能(一)上一篇菜单的点击和添加菜单功能已经在模版实现了,接下来实现菜单的编辑功能 实现菜单删除方法 在vue实例中添加删除菜单方法,根据选中的菜单级别和索引来删除. methods: { //删除菜单 delMenu:function(){ //删除主菜单 if(this.selectedMenuLevel()==1&&confirm('删除后菜单下设置的子菜单也将被删除')){ if(this.selectedMenuIndex===0){ thi

  • vue+axios+element ui 实现全局loading加载示例

    实现全局loading加载 分析需求,我们只需要在请求发起的时候开始loading,响应结束的时候关闭loading,就这么简单 对不对? import axios from 'axios'; import { Message, Loading } from 'element-ui'; import Cookies from 'js-cookie'; import router from '@/router/index' let loading //定义loading变量 function st

  • Vue.js使用axios动态获取response里的data数据操作

    今天开发时,使用axios返回的response中data有多个数据: 如果是获取cn里的数据的,可以用: response.data.cn 但是需求是根据选择来获取数据的,会发生变化,最开始的想法是,用一个变量来记录需要获取的key: 假设need是需要获取的某个key const dkey = this.need; response.data.dkey 这样发现获取不到数据,这是因为vue.js把dkey当成data里的某一个key了,类似于上面的"cn". 折腾了很久才突然想起,

随机推荐