vue使用ElementUI時導(dǎo)航欄默認展開功能的實現(xiàn)
更新時間：2018年07月04日 16:21:21 作者：0day__
這篇文章主要介紹了vue使用ElementUI時導(dǎo)航欄默認展開功能的實現(xiàn),本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
本文主要參考：
http://element.eleme.io/#/zh-CN/component/menu
在使用elementUI的時候發(fā)現(xiàn)，能夠展開的導(dǎo)航欄是不能展開的，效果這里先不演示了。可以在上邊的網(wǎng)站上看到。
現(xiàn)在有這樣的需求，就是說，默認的時候需要展開這些導(dǎo)航，就是一打開界面的時候就能夠顯示導(dǎo)航里面的菜單內(nèi)容。
具體操作是這樣的：
<script src="http://unpkg.com/vue/dist/vue.js"></script>
<script src="http://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>導(dǎo)航一</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>導(dǎo)航二</el-menu-item>
<el-menu-item index="3"><i class="el-icon-setting"></i>導(dǎo)航三</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">導(dǎo)航一</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">導(dǎo)航二</el-menu-item>
<el-menu-item index="3">導(dǎo)航三</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>導(dǎo)航一</el-menu-item>
<el-menu-item index="2"><i class="el-icon-message"></i>導(dǎo)航二</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分組二">
<el-menu-item index="3"><i class="el-icon-message"></i>導(dǎo)航三</el-menu-item>
<el-menu-item index="4"><i class="el-icon-message"></i>導(dǎo)航四</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值。
也就是說，如果我想要展開下面所有的內(nèi)容，我需要這樣寫：
<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :default-openeds=["1","8","11","1-4"]>
總結(jié)
以上所述是小編給大家介紹的vue使用ElementUI時導(dǎo)航欄默認展開功能的實現(xiàn)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
詳解Vue.js搭建路由報錯 router.map is not a function
這篇文章主要介紹了詳解Vue.js搭建路由報錯 router.map is not a function，非常具有實用價值，需要的朋友可以參考下2017-06-06
vue設(shè)置路由title,但刷新頁面時title失效的解決
這篇文章主要介紹了vue設(shè)置路由title，但刷新頁面時title失效的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要介紹了Vue項目識別不到@別名問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了Vue實現(xiàn)圓環(huán)進度條的示例，幫助大家更好的理解和使用前端框架進行開發(fā)，感興趣的朋友可以了解下2021-02-02
這篇文章主要為大家詳細介紹了vue Draggable實現(xiàn)拖動改變順序，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
vue實現(xiàn)登錄后頁面跳轉(zhuǎn)到之前頁面
本文給大家分享了vue實現(xiàn)登錄后頁面跳轉(zhuǎn)到之前頁面的一個功能，有這方便需要的朋友學(xué)習(xí)參考下吧。2018-01-01
這篇文章主要介紹了vue 彈出遮罩層樣式實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了vue項目打包后打開空白解決辦法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
這篇文章主要為大家詳細介紹了vue實現(xiàn)文字加密功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
這篇文章主要介紹了Nuxt之vue服務(wù)端渲染，NUXT集成了利用Vue開發(fā)服務(wù)端渲染的應(yīng)用所需要的各種配置，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06