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


Posted in Javascript onAugust 22, 2018

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" :default-openeds="openeds">

openeds需要在data里面定义一下

openeds是一个数组(当前打开的sub-menu的 key 数组)

data () {
 return {
 openeds: ['1'],
 uniqueOpened: false
 }
}
openeds: ['1'],

:defaultOpeneds=['...'] 属性内容和下面的 <el-submenu index="..."> 里面的index内容是关联的,两个属性内容是一样的就可以关联了

如果你定义了3个需要展开的菜单导航

openeds: ['1','2','3'],

这样设置就好!

拓展知识: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项目动态配导航菜单,只要路由配置好,菜单就能实现。

以上这篇element-ui 设置菜单栏展开的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js简单实现让文本框内容逐个字的显示出来
Oct 22 Javascript
js数组去重的常用方法总结
Jan 24 Javascript
详解JavaScript的表达式与运算符
Nov 30 Javascript
AngularJS学习笔记之表单验证功能实例详解
Jul 06 Javascript
Bootstrap弹出框(Popover)被挤压的问题小结
Jul 11 Javascript
Angularjs的键盘事件的绑定
Jul 27 Javascript
vue中component组件的props使用详解
Sep 04 Javascript
vue中使用better-scroll实现滑动效果及注意事项
Nov 15 Javascript
解决使用layui对select append元素无效或者未及时更新的问题
Sep 18 Javascript
ant-design-vue 实现表格内部字段验证功能
Dec 16 Javascript
JavaScript实现切换多张图片
Jan 27 Javascript
一百多行代码实现react拖拽hooks
Mar 23 Javascript
详解vue-cli脚手架中webpack配置方法
Aug 22 #Javascript
element-ui使用导航栏跳转路由的用法详解
Aug 22 #Javascript
详解微信小程序canvas圆角矩形的绘制的方法
Aug 22 #Javascript
解决element UI 自定义传参的问题
Aug 22 #Javascript
微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)
Aug 22 #Javascript
解决element-ui中下拉菜单子选项click事件不触发的问题
Aug 22 #Javascript
微信小程序 Animation实现图片旋转动画示例
Aug 22 #Javascript
You might like
php数组中删除元素的实现代码
2012/06/22 PHP
PHP+JS实现大规模数据提交的方法
2015/07/02 PHP
laravel 多图上传及图片的存储例子
2019/10/14 PHP
任意位置显示html菜单
2007/02/01 Javascript
javascript同步Import,同步调用外部js的方法
2008/07/08 Javascript
jQuery源码中的chunker 正则过滤符分析
2012/07/31 Javascript
单击按钮显示隐藏子菜单经典案例
2013/01/04 Javascript
node.js正则表达式获取网页中所有链接的代码实例
2014/06/03 Javascript
浅析基于WEB前端页面的页面内容搜索的实现思路
2014/06/10 Javascript
浅谈Nodejs应用主文件index.js
2016/08/28 NodeJs
关于List.ToArray()方法的效率测试
2016/09/30 Javascript
angular 基于ng-messages的表单验证实例
2017/05/04 Javascript
JavaScript中的ES6 Proxy的具体使用
2019/06/16 Javascript
微信小程序sessionid不一致问题解决
2019/08/30 Javascript
关于JS解构的5种有趣用法
2019/09/05 Javascript
vue下的@change事件的实现
2019/10/25 Javascript
[01:18:43]2014 DOTA2华西杯精英邀请赛5 24 iG VS DK
2014/05/25 DOTA
python每隔N秒运行指定函数的方法
2015/03/16 Python
Python中使用logging模块打印log日志详解
2015/04/05 Python
Python 常用string函数详解
2016/05/30 Python
Python运维之获取系统CPU信息的实现方法
2018/06/11 Python
Python 数据可视化pyecharts的使用详解
2019/06/26 Python
Django中自定义模型管理器(Manager)及方法
2019/09/23 Python
python中p-value的实现方式
2019/12/16 Python
Tensorflow分批量读取数据教程
2020/02/07 Python
Django REST framwork的权限验证实例
2020/04/02 Python
pycharm 对代码做静态检查操作
2020/06/09 Python
html5指南-6.如何创建离线web应用程序实现离线访问
2013/01/07 HTML / CSS
美国乒乓球设备、配件和服装品牌:Killerspin
2020/06/07 全球购物
super关键字的用法
2012/04/10 面试题
大课间活动制度
2014/01/18 职场文书
俞敏洪北大演讲稿
2014/05/22 职场文书
分公司负责人任命书
2014/06/04 职场文书
文员岗位职责范本
2015/04/16 职场文书
Redis源码阅读:Redis字符串SDS详解
2021/07/15 Redis
《地。-关于地球的运动-》单行本第七集上市,小说家朝井辽献上期待又害怕的推荐文
2022/03/31 日漫