vue使用ElementUI时导航栏默认展开功能的实现


Posted in Javascript onJuly 04, 2018

本文主要参考:

http://element.eleme.io/#/zh-CN/component/menu

在使用elementUI的时候发现,能够展开的导航栏是不能展开的,效果这里先不演示了。可以在上边的网站上看到。

现在有这样的需求,就是说,默认的时候需要展开这些导航,就是一打开界面的时候就能够显示导航里面的菜单内容。

具体操作是这样的:

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@1.4.1/lib/index.js"></script>
<div id="app">
<el-row class="tac">
 <el-col :span="8">
  <h5>带 icon</h5>
  <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :default-openeds=["1"]>
   <el-submenu index="1">
    <template slot="title"><i class="el-icon-message"></i>导航一</template>
    <el-menu-item-group>
     <el-submenu index="8">
     <template slot="title">cccc</template>
     <el-menu-item index="1-1">选项1</el-menu-item>
     <el-menu-item index="1-2">选项2</el-menu-item>
     </el-submenu>
    </el-menu-item-group>
    <el-menu-item-group>
    <el-submenu index="11">
    <template slot="title">bbb</template>
     <el-menu-item index="1-3">选项3</el-menu-item>
    </el-submenu>
    </el-menu-item-group>
    <el-submenu index="1-4">
     <template slot="title">选项4</template>
     <el-menu-item index="1-4-1">选项1</el-menu-item>
    </el-submenu>
   </el-submenu>
   <el-menu-item index="2"><i class="el-icon-menu"></i>导航二</el-menu-item>
   <el-menu-item index="3"><i class="el-icon-setting"></i>导航三</el-menu-item>
  </el-menu>
 </el-col>
 <el-col :span="8">
  <h5>不带 icon</h5>
  <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" theme="dark">
   <el-submenu index="1">
    <template slot="title">导航一</template>
    <el-menu-item-group title="分组一">
     <el-menu-item index="1-1">选项1</el-menu-item>
     <el-menu-item index="1-2">选项2</el-menu-item>
    </el-menu-item-group>
    <el-menu-item-group title="分组2">
     <el-menu-item index="1-3">选项3</el-menu-item>
    </el-menu-item-group>
    <el-submenu index="1-4">
     <template slot="title">选项4</template>
     <el-menu-item index="1-4-1">选项1</el-menu-item>
    </el-submenu>
   </el-submenu>
   <el-menu-item index="2">导航二</el-menu-item>
   <el-menu-item index="3">导航三</el-menu-item>
  </el-menu>
 </el-col>
 <el-col :span="8">
  <h5>分组</h5>
  <el-menu mode="vertical" default-active="1" class="el-menu-vertical-demo">
   <el-menu-item-group title="分组一">
    <el-menu-item index="1"><i class="el-icon-message"></i>导航一</el-menu-item>
    <el-menu-item index="2"><i class="el-icon-message"></i>导航二</el-menu-item>
   </el-menu-item-group>
   <el-menu-item-group title="分组二">
    <el-menu-item index="3"><i class="el-icon-message"></i>导航三</el-menu-item>
    <el-menu-item index="4"><i class="el-icon-message"></i>导航四</el-menu-item>
   </el-menu-item-group>
  </el-menu>
 </el-col>
</el-row>
</div>

需要注意的是这里:

<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :default-openeds=["1"]>

这里的:default-openeds=["1"]是需要展开的子sub目录的index值。

也就是说,如果我想要展开下面所有的内容,我需要这样写:

<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :default-openeds=["1","8","11","1-4"]>

总结

以上所述是小编给大家介绍的vue使用ElementUI时导航栏默认展开功能的实现,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
刷新时清空文本框内容的js代码
Apr 23 Javascript
JS实现根据出生年月计算年龄
Jan 10 Javascript
js弹出确认是否删除对话框
Mar 27 Javascript
node.js中的buffer.slice方法使用说明
Dec 10 Javascript
window.location.hash知识汇总
Nov 09 Javascript
原生JavaScript实现的简单省市县三级联动功能示例
May 27 Javascript
vue插件vue-resource的使用笔记(小结)
Aug 04 Javascript
Django与Vue语法的冲突问题完美解决方法
Dec 14 Javascript
vue2.0 实现导航守卫(路由守卫)
May 21 Javascript
JavaScript使用享元模式实现文件上传优化操作示例
Aug 07 Javascript
关于vue路由缓存清除在main.js中的设置
Nov 06 Javascript
React+EggJs实现断点续传的示例代码
Jul 07 Javascript
vue两个组件间值的传递或修改方式
Jul 04 #Javascript
jQuery实现炫丽的3d旋转星空效果
Jul 04 #jQuery
jQuery实现table表格checkbox全选的方法分析
Jul 04 #jQuery
React组件内事件传参实现tab切换的示例代码
Jul 04 #Javascript
解决vue项目打包后提示图片文件路径错误的问题
Jul 04 #Javascript
浅谈在react中如何实现扫码枪输入
Jul 04 #Javascript
Redux实现组合计数器的示例代码
Jul 04 #Javascript
You might like
从Web查询数据库之PHP与MySQL篇
2009/09/25 PHP
Laravel框架实现的rbac权限管理操作示例
2019/01/16 PHP
让textarea控件的滚动条怎是位与最下方
2007/04/20 Javascript
用js判断页面刷新或关闭的方法(onbeforeunload与onunload事件)
2012/06/22 Javascript
获取offsetTop和offsetLeft值的js代码(兼容)
2013/04/16 Javascript
JS获取DropDownList的value值与text值的示例代码
2014/01/07 Javascript
简介JavaScript中fixed()方法的使用
2015/06/08 Javascript
详解JavaScript的策略模式编程
2015/06/24 Javascript
JavaScript中Null与Undefined的区别解析
2015/06/30 Javascript
jquery实现鼠标滑过显示二级下拉菜单效果
2015/08/24 Javascript
JavaScritp添加url参数并将参数加入到url中及更改url参数的方法
2015/10/26 Javascript
微信小程序 传值取值的几种方法总结
2017/01/16 Javascript
JS 使用 window对象的print方法实现分页打印功能
2018/05/16 Javascript
vue-music 使用better-scroll遇到轮播图不能自动轮播问题
2018/12/03 Javascript
redux处理异步action解决方案
2020/03/22 Javascript
通过vue刷新左侧菜单栏操作
2020/08/06 Javascript
selenium 反爬虫之跳过淘宝滑块验证功能的实现代码
2020/08/27 Javascript
浅谈Vue使用Elementui修改默认的最快方法
2020/12/05 Vue.js
vue中配置scss全局变量的步骤
2020/12/28 Vue.js
py2exe 编译ico图标的代码
2013/03/08 Python
python构建深度神经网络(DNN)
2018/03/10 Python
python tkinter基本属性详解
2019/09/16 Python
python使用itchat模块给心爱的人每天发天气预报
2019/11/25 Python
Python小白学习爬虫常用请求报头
2020/06/03 Python
一款CSS3实现多功能下拉菜单(带分享按)的教程
2014/11/05 HTML / CSS
HTML5通过调用canvas对象的getContext()方法来获取绘图环境
2014/06/23 HTML / CSS
团日活动总结书格式
2014/05/08 职场文书
党的群众路线教育实践活动个人整改措施材料
2014/11/04 职场文书
2014年培训工作总结范文
2014/11/27 职场文书
中班下学期个人总结
2015/02/12 职场文书
离婚被告答辩状
2015/05/22 职场文书
重阳节主题班会
2015/08/17 职场文书
python实现图片批量压缩
2021/04/24 Python
SpringBoot实现异步事件驱动的方法
2021/06/28 Java/Android
分享Python获取本机IP地址的几种方法
2022/03/17 Python
SpringBoot集成MongoDB实现文件上传的步骤
2022/04/18 MongoDB