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自定义的函数
Aug 05 Javascript
用jQuery简化JavaScript开发分析
Feb 19 Javascript
javascript 面向对象编程 万物皆对象
Sep 17 Javascript
使用jQuery操作Cookies的实现代码
Oct 09 Javascript
详解vue事件对象、冒泡、阻止默认行为
Mar 20 Javascript
jQuery创建及操作xml格式数据示例
May 26 jQuery
Vue脚手架的简单使用实例
Jul 10 Javascript
浅析Vue.js 中的条件渲染指令
Nov 19 Javascript
layui表格 列自动适应大小失效的解决方法
Sep 06 Javascript
基于JavaScript或jQuery实现网站夜间/高亮模式
May 30 jQuery
在VUE style中使用data中的变量的方法
Jun 19 Javascript
vue使用Sass时报错问题的解决方法
Oct 14 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
Banner程序
2006/10/09 PHP
PHP中cookie和session的区别实例分析
2014/08/28 PHP
joomla数据库操作示例代码
2016/01/06 PHP
利用php生成验证码
2017/02/23 PHP
extjs 04_grid 单击事件新发现
2012/11/27 Javascript
js confirm()方法的使用方法实例
2013/07/13 Javascript
js简单实现根据身份证号码识别性别年龄生日
2013/11/29 Javascript
纯JS实现旋转图片3D展示效果
2015/04/12 Javascript
RGB和YUV 多媒体编程基础详细介绍
2016/11/04 Javascript
vue构建单页面应用实战
2017/04/10 Javascript
原生js调用json方法总结
2018/02/22 Javascript
vue iView 上传组件之手动上传功能
2018/03/16 Javascript
Vue 配合eiement动态路由,权限验证的方法
2018/09/26 Javascript
小程序实现列表多个批量倒计时
2021/01/29 Javascript
使用ESLint禁止项目导入特定模块的方法步骤
2019/03/04 Javascript
这15个Vue指令,让你的项目开发爽到爆
2019/10/11 Javascript
分享15个最受欢迎的Python开源框架
2014/07/13 Python
Python中统计函数运行耗时的方法
2015/05/05 Python
Python的标准模块包json详解
2017/03/13 Python
python之DataFrame实现excel合并单元格
2021/02/22 Python
Python3 Click模块的使用方法详解
2020/02/12 Python
python小白切忌乱用表达式
2020/05/29 Python
浅谈keras中loss与val_loss的关系
2020/06/22 Python
Visual Studio Code搭建django项目的方法步骤
2020/09/17 Python
html5使用canvas画空心圆与实心圆
2014/12/15 HTML / CSS
FC-Moto瑞典:欧洲最大的摩托车服装和头盔商店之一
2018/11/27 全球购物
SEPHORA丝芙兰德国官方购物网站:化妆品、护肤品和香水
2020/01/21 全球购物
基层工作经历证明
2014/01/13 职场文书
大学生2014全国两会学习心得体会
2014/03/10 职场文书
情人节寄语大全
2014/04/11 职场文书
医院领导班子四风问题对照检查材料
2014/10/26 职场文书
2015年大学班长个人工作总结
2015/04/24 职场文书
检讨书模板大全
2015/05/07 职场文书
解析Redis Cluster原理
2021/06/21 Redis
Spring Boot实战解决高并发数据入库之 Redis 缓存+MySQL 批量入库问题
2022/02/12 Redis
uni-app 微信小程序授权登录的实现步骤
2022/02/18 Javascript