vue使用ElementUI時導航欄默認展開功能的實現(xiàn)
更新時間：2018年07月04日 16:21:21 作者：0day__
這篇文章主要介紹了vue使用ElementUI時導航欄默認展開功能的實現(xiàn),本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
本文主要參考：
http://element.eleme.io/#/zh-CN/component/menu
在使用elementUI的時候發(fā)現(xiàn)，能夠展開的導航欄是不能展開的，效果這里先不演示了。可以在上邊的網(wǎng)站上看到。
現(xiàn)在有這樣的需求，就是說，默認的時候需要展開這些導航，就是一打開界面的時候就能夠顯示導航里面的菜單內(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>導航一</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值。
也就是說，如果我想要展開下面所有的內(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時導航欄默認展開功能的實現(xiàn)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
VueFlow是一個專門為Vue.js框架設(shè)計的交互式可視化庫,它允許開發(fā)者輕松創(chuàng)建和管理復(fù)雜的圖形模型,如流程圖、狀態(tài)機、組織結(jié)構(gòu)圖等,本文給大家介紹了Vue3實現(xiàn)vueFLow流程組件的詳細指南,需要的朋友可以參考下2024-11-11
這篇文章主要為大家詳細介紹了vue.js指令v-model實現(xiàn)方法,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要給大家介紹了關(guān)于在Vue項目中使用mock.js的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-01-01
這篇文章主要為大家詳細介紹了Vue組件實現(xiàn)觸底判斷，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-06-06
Vue Element-UI中el-table實現(xiàn)單選的示例代碼
在element-ui中是為我們準備好了可直接使用的單選與多選屬性的,本文主要介紹了Vue Element-UI中el-table實現(xiàn)單選的示例代碼,具有一定的參考價值,感興趣的可以了解一下2023-12-12
這篇文章主要介紹了vue3中的伸縮菜單組件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
vue中使用v-if,v-else來設(shè)置css樣式的步驟
我們在使用vue項目開發(fā)時，v-if是使用的非常多的，在這里我們談?wù)勅绾问褂胿-i來綁定修改css樣式，使用的主要是雙向數(shù)據(jù)綁定，即通過改變他的狀態(tài)來改變他的樣式，這篇文章主要介紹了vue中如何使用v-if,v-else來設(shè)置css樣式,需要的朋友可以參考下2023-03-03
Vuex是Vue.js應(yīng)用的狀態(tài)管理模式,用于集中式管理應(yīng)用狀態(tài),它包括state、getters、mutations、actions和modules等模塊,適用于多組件共享的數(shù)據(jù)管理2025-01-01
這篇文章主要介紹了記一次vue-webpack項目優(yōu)化實踐，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
這篇文章主要介紹了Vue細節(jié)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04