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框架
Aug 13 Javascript
子窗口、父窗口和Silverlight之间的相互调用
Aug 16 Javascript
Android中资源文件(非代码部分)的使用概览
Dec 18 Javascript
JS获取各种浏览器窗口大小的方法
Jan 14 Javascript
jQuery实现简单下拉导航效果
Sep 07 Javascript
通过Jquery.cookie.js实现展示浏览网页的历史记录超管用
Oct 23 Javascript
用js读写cookie的简单方法(推荐)
Aug 08 Javascript
JS+html5制作简单音乐播放器
Sep 13 Javascript
vue.js实例对象+组件树的详细介绍
Oct 20 Javascript
Vue数据双向绑定原理及简单实现方法
May 18 Javascript
微信公众号开发之微信支付代码记录的实现
Oct 16 Javascript
JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】
May 01 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实现将GB编码转换为UTF8
2006/11/25 PHP
Mysql数据库操作类( 1127版,提供源码下载 )
2010/12/02 PHP
PHP安全性漫谈
2012/06/28 PHP
PHP 下载文件时自动添加bom头的方法实例
2014/01/10 PHP
ThinkPHP的SAE开发相关注意事项详解
2016/10/09 PHP
laravel框架数据库操作、查询构建器、Eloquent ORM操作实例分析
2019/12/20 PHP
Apply an AutoFormat to an Excel Spreadsheet
2007/06/12 Javascript
可以把编码转换成 gb2312编码lib.UTF8toGB2312.js
2007/08/21 Javascript
JavaScript的RequireJS库入门指南
2015/07/01 Javascript
jQuery中extend函数详解
2015/07/13 Javascript
在JavaScript的jQuery库中操作AJAX的方法讲解
2015/08/15 Javascript
深入理解jQuery之防止冒泡事件
2016/05/24 Javascript
javascript中Date对象的使用总结
2016/11/21 Javascript
Node.js开发第三方微信公众平台
2017/06/05 Javascript
NodeJs form-data格式传输文件的方法
2017/12/13 NodeJs
vue2 设置router-view默认路径的实例
2018/09/20 Javascript
vue+Element中table表格实现可编辑(select下拉框)
2020/05/21 Javascript
Python的Django框架中模板碎片缓存简介
2015/07/24 Python
对numpy中数组元素的统一赋值实例
2018/04/04 Python
关于Pytorch的MLP模块实现方式
2020/01/07 Python
在python中求分布函数相关的包实例
2020/04/15 Python
Europcar美国/加拿大:预订汽车或卡车租赁服务
2018/11/13 全球购物
Stio官网:男女、儿童户外服装
2019/12/13 全球购物
Haggar官网:美国男装品牌
2020/02/16 全球购物
绿化先进工作者事迹材料
2014/01/30 职场文书
KTV的创业计划书范文
2014/02/02 职场文书
函授自我鉴定范文
2014/02/06 职场文书
应急管理培训方案
2014/06/12 职场文书
中国梦口号
2014/06/13 职场文书
乡镇食品安全责任书
2014/07/28 职场文书
员工工作及收入证明
2014/10/28 职场文书
2015年创先争优活动总结
2015/03/27 职场文书
公司仓管员岗位职责
2015/04/01 职场文书
沂蒙六姐妹观后感
2015/06/08 职场文书
浅析Python中的随机采样和概率分布
2021/12/06 Python
Nginx 常用配置
2022/05/15 Servers