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 相关文章推荐
一个简单的JavaScript 日期计算算法
Sep 11 Javascript
基于jquery实现表格无刷新分页
Jan 07 Javascript
TypeScript Type Innference(类型判断)
Mar 10 Javascript
在IE8上JS实现combobox支持拼音检索功能
May 23 Javascript
Bootstrap 折叠(Collapse)插件用法实例详解
Jun 01 Javascript
微信小程序进行微信支付的步骤昂述
Dec 01 Javascript
ES6学习之变量的两种命名方法示例
Jul 18 Javascript
详解Nuxt.js Vue服务端渲染摸索
Feb 08 Javascript
pageGroup.js实现分页功能
Jul 27 Javascript
对layui数据表格动态cols(字段)动态变化详解
Oct 25 Javascript
Node快速切换版本、版本回退(降级)、版本更新(升级)
Jan 07 Javascript
vue实现input输入模糊查询的三种方式
Aug 14 Vue.js
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
php设计模式 Visitor 访问者模式
2011/06/28 PHP
phpadmin如何导入导出大数据文件及php.ini参数修改
2013/02/18 PHP
PHP实现的策略模式示例
2019/03/20 PHP
JS中confirm,alert,prompt函数使用区别分析
2010/04/01 Javascript
JQuery Study Notes 学习笔记(一)
2010/08/04 Javascript
了解jQuery技巧来提高你的代码(个人觉得那个jquery的手册很不错)
2012/02/10 Javascript
jQuery ReferenceError: $ is not defined 错误的处理办法
2013/05/10 Javascript
js判断ie版本号的简单实现代码
2014/03/05 Javascript
javascript数据结构与算法之检索算法
2015/04/04 Javascript
JavaScript Length 属性的总结
2015/11/02 Javascript
js实现将选中内容分享到新浪或腾讯微博
2015/12/16 Javascript
js简单实现网页换肤功能
2017/04/07 Javascript
JavaScript数据结构之数组的表示方法示例
2017/04/12 Javascript
JavaScript之class继承_动力节点Java学院整理
2017/07/03 Javascript
node.js遍历目录的方法示例
2018/08/01 Javascript
bootstrap-table formatter 使用vue组件的方法
2019/05/09 Javascript
对layer弹出框中icon数字参数的说明介绍
2019/09/04 Javascript
Jquery 动态添加元素并添加点击事件实现过程解析
2019/10/12 jQuery
[06:07]DOTA2-DPC中国联赛 正赛 Ehome vs VG 选手采访
2021/03/11 DOTA
Python的__builtin__模块中的一些要点知识
2015/05/02 Python
使用Python来编写HTTP服务器的超级指南
2016/02/18 Python
Python学习入门之区块链详解
2017/07/25 Python
python机器学习理论与实战(五)支持向量机
2018/01/19 Python
使用Numpy读取CSV文件,并进行行列删除的操作方法
2018/07/04 Python
在Python中增加和插入元素的示例
2018/11/01 Python
python 实现 hive中类似 lateral view explode的功能示例
2020/05/18 Python
html5视频播放_动力节点Java学院整理
2017/07/13 HTML / CSS
Claire’s法国:时尚配饰、美容、珠宝、头发
2021/01/16 全球购物
人力资源专业推荐信
2013/11/29 职场文书
热爱祖国的演讲稿
2014/05/04 职场文书
个人考核材料
2014/05/15 职场文书
银行纠风工作实施方案
2014/06/08 职场文书
文艺晚会策划方案
2014/06/11 职场文书
中学教师师德师风承诺书
2015/04/28 职场文书
2015年幼儿教育工作总结
2015/07/24 职场文书
2019消防宣传标语!
2019/07/10 职场文书