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 相关文章推荐
javascript是怎么继承的介绍
Jan 05 Javascript
js中实现多态采用和继承类似的方法
Aug 22 Javascript
Google Maps API地图应用示例分享
Oct 23 Javascript
javascript实现密码强度显示
Mar 18 Javascript
jQuery实现简易的天天爱消除小游戏
Oct 16 Javascript
老生常谈JQuery data方法的使用
Sep 09 Javascript
微信小程序 设置启动页面的两种方法
Mar 09 Javascript
Angular实现响应式表单
Aug 04 Javascript
JavaScript事件对象event用法分析
Jul 27 Javascript
基于Bootstrap下拉框插件bootstrap-select使用方法详解
Aug 07 Javascript
bootstrapTable+ajax加载数据 refresh更新数据
Aug 31 Javascript
Vue2.0搭建脚手架
Mar 13 Vue.js
详解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
《心理测量者3》剧场版动画预告
2020/03/02 日漫
Ext.data.PagingMemoryProxy分页一次性读取数据的实现代码
2010/04/07 PHP
php上传apk后自动提取apk包信息的使用(示例下载)
2013/04/26 PHP
PHP实现数组和对象的相互转换操作示例
2019/03/20 PHP
CodeIgniter框架实现的整合Smarty引擎DEMO示例
2019/03/28 PHP
EasyUI中的tree用法介绍
2011/11/01 Javascript
jQuery1.6 使用方法二
2011/11/23 Javascript
使用JS或jQuery模拟鼠标点击a标签事件代码
2014/03/10 Javascript
jquery无法设置checkbox选中即没有变成选中状态
2014/03/27 Javascript
上传文件返回的json数据会被提示下载问题解决方案
2014/12/03 Javascript
javascript设计简单的秒表计时器
2020/09/05 Javascript
jquery实现简单的全选和反选功能
2016/01/02 Javascript
简介AngularJS中$http服务的用法
2016/02/06 Javascript
非常酷炫的Bootstrap图片轮播动画
2016/05/27 Javascript
jQuery自制提示框tooltip改进版
2016/08/01 Javascript
Vue.js如何实现路由懒加载浅析
2017/08/14 Javascript
create-react-app构建项目慢的解决方法
2018/03/14 Javascript
基于Layui自定义模块的使用方法详解
2019/09/14 Javascript
详解vue之自行实现派发与广播(dispatch与broadcast)
2021/01/19 Vue.js
python多线程用法实例详解
2015/01/15 Python
浅谈Python peewee 使用经验
2017/10/20 Python
浅谈Python中带_的变量或函数命名
2017/12/04 Python
numpy.delete删除一列或多列的方法
2018/04/03 Python
python实现人民币大写转换
2018/06/20 Python
python之文件读取一行一行的方法
2018/07/12 Python
python GUI库图形界面开发之PyQt5图片显示控件QPixmap详细使用方法与实例
2020/02/27 Python
CSS3 input框的实现代码类似Google登录的动画效果
2020/08/04 HTML / CSS
美国玩具公司:U.S.Toy
2018/05/19 全球购物
新英格兰最大的特色礼品连锁店:The Paper Store
2018/07/23 全球购物
车库门开启器、遥控器和零件:Chamberlain
2019/04/09 全球购物
企业管理毕业生求职信范文
2014/03/07 职场文书
低碳环保倡议书
2014/04/14 职场文书
人身意外保险授权委托书
2014/10/01 职场文书
匿名检举信范文
2015/03/02 职场文书
出国留学导师推荐信
2015/03/26 职场文书
Django实现drf搜索过滤和排序过滤
2021/06/21 Python