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常用字符串处理方法应用总结
May 22 Javascript
jQuery插件Tooltipster实现漂亮的工具提示
Apr 12 Javascript
jQuery实现仿路边灯箱广告图片轮播效果
Apr 15 Javascript
Jquery实现上下移动和排序代码
Oct 17 Javascript
Vue.js组件tree实现省市多级联动
Dec 02 Javascript
Javascript 对cookie操作详解及实例
Dec 29 Javascript
JavaScript验证知识整理
Mar 24 Javascript
VUE axios上传图片到七牛的实例代码
Jul 28 Javascript
最通俗易懂的javascript变量提升详解
Aug 05 Javascript
angularjs1.5 组件内用函数向外传值的实例
Sep 30 Javascript
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 jQuery
JS数组方法slice()用法实例分析
Jan 18 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
允许phpmyadmin空密码登录的配置方法
2011/05/29 PHP
php删除文件夹及其文件夹下所有文件的函数代码
2013/01/23 PHP
php抛出异常与捕捉特定类型的异常详解
2016/10/26 PHP
写出更好的JavaScript程序之undefined篇(中)
2009/11/23 Javascript
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
2010/03/12 Javascript
js 小数取整的函数
2010/05/10 Javascript
基于jQuery的360图片展示实现代码
2012/06/14 Javascript
jquery属性过滤选择器使用示例
2013/06/18 Javascript
table行随鼠标移动变色示例
2014/05/07 Javascript
Angular用来控制元素的展示与否的原生指令介绍
2015/01/07 Javascript
jQuery实现仿路边灯箱广告图片轮播效果
2015/04/15 Javascript
JS仿淘宝实现的简单滑动门效果代码
2015/10/14 Javascript
JavaScript高仿支付宝倒计时页面及代码实现
2016/10/21 Javascript
LayUI表格批量删除方法
2018/08/15 Javascript
Javascript迭代、递推、穷举、递归常用算法实例讲解
2019/02/01 Javascript
解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
2019/06/17 Javascript
layui问题之模拟table表格中的选中按钮选中事件的方法
2019/09/20 Javascript
基于NodeJS开发钉钉回调接口实现AES-CBC加解密
2020/08/20 NodeJs
使用graphics.py实现2048小游戏
2015/03/10 Python
Python内置函数 next的具体使用方法
2017/11/24 Python
python抓取文件夹的所有文件
2018/02/27 Python
Python实现发送与接收邮件的方法详解
2018/03/28 Python
python统计多维数组的行数和列数实例
2018/06/23 Python
使用 Python 实现简单的 switch/case 语句的方法
2018/09/17 Python
详解Python数据可视化编程 - 词云生成并保存(jieba+WordCloud)
2019/03/26 Python
python实现kNN算法识别手写体数字的示例代码
2019/08/16 Python
Python(PyS60)实现简单语音整点报时
2019/11/18 Python
HTML5 图片悬停放大的实现代码示例
2019/12/04 HTML / CSS
kmart凯马特官网:美国最大的打折零售商和全球最大的批发商之一
2016/11/17 全球购物
高中三年学习生活的自我评价
2013/10/10 职场文书
幼儿园义卖活动方案
2014/01/17 职场文书
乒乓球兴趣小组活动总结
2014/07/08 职场文书
本溪水洞导游词
2015/02/11 职场文书
2016年师德师风学习心得体会
2016/01/12 职场文书
Python爬虫之爬取二手房信息
2021/04/27 Python
Python 数据可视化工具 Pyecharts 安装及应用
2022/04/20 Python