vue使用ElementUI時導航欄默認展開功能的實現(xiàn)

發(fā)布時間：2020-08-31 14:08:10 來源：腳本之家閱讀：689 作者：0day__ 欄目：web開發(fā)

本文主要參考：

http://element.eleme.io/#/zh-CN/component/menu

在使用elementUI的時候發(fā)現(xiàn)，能夠展開的導航欄是不能展開的，效果這里先不演示了?？梢栽谏线叺木W站上看到。

現(xiàn)在有這樣的需求，就是說，默認的時候需要展開這些導航，就是一打開界面的時候就能夠顯示導航里面的菜單內容。

具體操作是這樣的：

<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">
  <h6>帶 icon</h6>
  <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">
  <h6>不帶 icon</h6>
  <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">
  <h6>分組</h6>
  <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時導航欄默認展開功能的實現(xiàn)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！

向AI問一下細節(jié)

vue使用ElementUI時導航欄默認展開功能的實現(xiàn)

猜你喜歡

最新資訊

相關推薦

相關標簽