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 相关文章推荐
jquery 年会抽奖程序
Dec 22 Javascript
给js文件传参数(详解)
Jul 13 Javascript
jquery实现未经美化的简洁TAB菜单效果
Aug 28 Javascript
JavaScript模拟鼠标右键菜单效果
Dec 08 Javascript
Json解析的方法小结
Jun 22 Javascript
html、css和jquery相结合实现简单的进度条效果实例代码
Oct 24 Javascript
JavaScript表单验证开发
Nov 23 Javascript
Node接收电子邮件的实例代码
Jul 21 Javascript
bootstrap table表格客户端分页实例
Aug 07 Javascript
vue项目国际化vue-i18n的安装使用教程
Mar 14 Javascript
jQuery仿移动端支付宝键盘的实现代码
Aug 15 jQuery
JavaScript简单实现的仿微博留言功能示例
Jan 17 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
迅雷下载《中学科技》怀旧期刊下载
2021/02/27 无线电
openPNE常用方法分享
2011/11/29 PHP
基于PHP常用函数的用法详解
2013/05/10 PHP
laravel获取不到session的三种解决办法【推荐】
2018/09/16 PHP
JS array 数组详解
2009/03/22 Javascript
JS 修改URL参数(实现代码)
2013/07/08 Javascript
jquery解析xml字符串示例分享
2014/03/25 Javascript
原生js实现复制对象、扩展对象 类似jquery中的extend()方法
2014/08/30 Javascript
原生js实现类似弹窗抖动效果
2015/04/02 Javascript
jscript读写二进制文件的方法
2015/04/22 Javascript
jquery读写cookie操作实例分析
2015/12/24 Javascript
深入学习AngularJS中数据的双向绑定机制
2016/03/04 Javascript
JS验证字符串功能
2017/02/22 Javascript
原生JS实现圆环拖拽效果
2017/04/07 Javascript
vue动态绑定组件子父组件多表单验证功能的实现代码
2018/05/14 Javascript
JS实现页面数据懒加载
2020/02/13 Javascript
[51:53]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第二场 11.01
2020/11/02 DOTA
初学Python函数的笔记整理
2015/04/07 Python
Python中的Matplotlib模块入门教程
2015/04/15 Python
关于Django ForeignKey 反向查询中filter和_set的效率对比详解
2018/12/15 Python
Python中的支持向量机SVM的使用(附实例代码)
2019/06/26 Python
基于python 微信小程序之获取已存在模板消息列表
2019/08/05 Python
python 遍历pd.Series的index和value
2019/11/26 Python
win10系统Anaconda和Pycharm的Tensorflow2.0之CPU和GPU版本安装教程
2019/12/03 Python
Tensorflow的常用矩阵生成方式
2020/01/04 Python
python计算导数并绘图的实例
2020/02/29 Python
德国家用电器购物网站:Premiumshop24
2019/08/22 全球购物
经济管理专业毕业生自荐信范文
2014/01/02 职场文书
社区志愿者心得体会
2014/01/03 职场文书
大学生活动策划方案
2014/02/10 职场文书
五分钟演讲稿
2014/04/30 职场文书
员工薪酬激励方案
2014/06/13 职场文书
售后客服工作职责
2014/06/16 职场文书
班级读书活动总结
2014/06/30 职场文书
我们的节日中秋活动方案
2014/08/19 职场文书
创业计划书之酒吧
2019/12/02 职场文书