快捷導(dǎo)航

Element?ui中menu組件(el-menu/el-menu-item/el-submenu/template)層級結(jié)構(gòu)與用法示例

更新時間：2022年12月12日 15:05:12 作者：擦拉嘿

最近在使用Element開發(fā)時遇到了不少問題,下面這篇文章主要給大家介紹了關(guān)于Element?ui中menu組件(el-menu/el-menu-item/el-submenu/template)層級結(jié)構(gòu)與用法的相關(guān)資料,需要的朋友可以參考下

前言

（此篇文章寫下的時間是2020年，所以如今Element UI都更新了不知道多少版了，肯定會有些許變化，請勿完全照搬照抄，雖然可能這部分代碼沒什么大的變動，但還是要以官方文檔為準(zhǔn)，此文僅僅是借鑒，理解具體思路，然后再按照官方的例子來應(yīng)用到自己的項(xiàng)目中）

初學(xué)者，剛接觸，用到不知道怎么回事剛接觸，今天就特意各種粘貼復(fù)制示例代碼，終于自己試出來了，具體的結(jié)構(gòu)層級關(guān)系。

看完就能知道這個menu的結(jié)構(gòu)上怎么組織和使用

1. 我準(zhǔn)備的示例：

先上代碼，格式加了空行，方便看結(jié)構(gòu)：（前期模板組件的導(dǎo)入和注冊都略過了）

<el-menu
default-active="2"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
 
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>導(dǎo)航一</span>
        </template>
 
        <el-menu-item-group>
          <template slot="title">分組一</template>
          <el-menu-item index="1-1">選項(xiàng)1</el-menu-item>
          <el-menu-item index="1-2">選項(xiàng)2</el-menu-item>
        </el-menu-item-group>
 
        <el-menu-item-group title="分組2">
          <el-menu-item index="1-3">選項(xiàng)3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="1-4">
          <template slot="title">選項(xiàng)4</template>
          <el-menu-item index="1-4-1">選項(xiàng)1</el-menu-item>
        </el-submenu>
      </el-submenu>
 
      <el-menu-item index="2">
        <i class="el-icon-menu"></i>
        <span slot="title">導(dǎo)航二</span>
      </el-menu-item>
 
      <el-menu-item index="3" disabled>
        <i class="el-icon-document"></i>
        <span slot="title">導(dǎo)航三</span>
      </el-menu-item>
 
      <el-menu-item index="4">
        <i class="el-icon-setting"></i>
        <span slot="title">導(dǎo)航四</span>
      </el-menu-item>
 
</el-menu>

2. 好戲正式開始：

看上面的示例代碼，最外面一層是由 <el-menu> </el-menu> 標(biāo)簽包裹的，先從簡單的開始，看倒數(shù)一二三，后面那三個導(dǎo)航，因?yàn)槎际亲詈唵蔚慕Y(jié)構(gòu)，

僅一級導(dǎo)航欄

我取用導(dǎo)航二來做演示。用 <el-menu-item> </el-menu-item> 標(biāo)簽包裹的 , 里面的標(biāo)簽 <i> </i> 是圖標(biāo)沒什么說的，那個標(biāo)簽 <span> </span> 就是導(dǎo)航欄最頂上一層的一級導(dǎo)航（沒有子導(dǎo)航欄的），我們來看一下效果：

<el-menu
  default-active="1"
  background-color="#333744"
  text-color="#fff"
  active-text-color="#ffd04b">
 
      <el-menu-item index="2">
         <i class="el-icon-menu"></i>
         <span slot="title">導(dǎo)航二</span>
      </el-menu-item>
      
</el-menu>

只有一個導(dǎo)航欄，沒別的了

總結(jié)，當(dāng)你想要的導(dǎo)航欄只有一級的時候，我們就僅采用我這種結(jié)構(gòu)的ok了， <el-menu-item></el-menu-item> 包裹要顯示的以及導(dǎo)航欄內(nèi)容

一級導(dǎo)航欄 + 一級導(dǎo)航欄下的子導(dǎo)航欄

觀察最開始官方element ui 給的案例，應(yīng)該是和第一個導(dǎo)航欄有關(guān)，我們拿那一部分做嘗試，

這個是用 <el-submenu></el-submenu> 標(biāo)簽包裹的

<el-menu
   default-active="1"
   background-color="#333744"
   text-color="#fff"
   active-text-color="#ffd04b"
>
          
    <el-submenu index="1">
          一級導(dǎo)航欄+子導(dǎo)航
    </el-submenu>
 
</el-menu>

上面竟然沒有顯示我要他顯示的內(nèi)容，點(diǎn)開后的效果見下圖

竟然我要的一級導(dǎo)航標(biāo)題到了里面，不對不對, 再回頭看下示例，

先試下紅色圈出的部分，添加上template 看下

<el-menu
   default-active="1"
   background-color="#333744"
   text-color="#fff"
   active-text-color="#ffd04b"
   >
  
     <el-submenu index="1">
 
        <template slot="title">
           <i class="el-icon-location"></i>
           <span>一級dhl+zdh</span>
        </template>
        子導(dǎo)航欄
 
     </el-submenu>
 
</el-menu>

點(diǎn)開后：看起來還ok吧，

但就是子導(dǎo)航欄的格式有點(diǎn)問題，不是我們想要的效果，不過一級導(dǎo)航欄的顯示是有了，看來這個 template 標(biāo)簽是用來控制 submenu 的對應(yīng)的那級的導(dǎo)航欄內(nèi)容的顯示。

然后我們開始嘗試黃色框里面的部分：

<el-menu
    default-active="1"
    background-color="#333744"
    text-color="#fff"
    active-text-color="#ffd04b"
    >
          
    <el-submenu index="1">
            
        <template slot="title">
            <i class="el-icon-location"></i>
            <span>一級dhl+zdh</span>
        </template>
 
        子導(dǎo)航欄
 
        <el-submenu index="1-4">
              <template slot="title">選項(xiàng)4</template>
              <el-menu-item index="1-4-1">選項(xiàng)1</el-menu-item>
        </el-submenu>
 
     </el-submenu>
 
</el-menu>

點(diǎn)開后：出了個選項(xiàng)一，

看來 submenu 標(biāo)簽就是用來控制多一層子導(dǎo)航欄，而里面的 template 標(biāo)簽就是用來設(shè)置那一級導(dǎo)航欄的標(biāo)題內(nèi)容的，

而實(shí)際的子導(dǎo)航欄，就單純的一個導(dǎo)航欄【沒有子導(dǎo)航欄那種】，使用 el-menu-item 標(biāo)簽來實(shí)現(xiàn)

一級導(dǎo)航欄+子導(dǎo)航欄組

現(xiàn)在我們再回過頭來看導(dǎo)航組

官網(wǎng)示例提供了兩種初始化導(dǎo)航組的方式

通過el-menu-item-group組件可以實(shí)現(xiàn)菜單進(jìn)行分組，分組名可以通過title屬性直接設(shè)定，也可以通過具名 slot 來設(shè)定

<el-menu
    default-active="1"
    background-color="#333744"
    text-color="#fff"
    active-text-color="#ffd04b"
    >
          
    <el-submenu index="1">
           
        <template slot="title">
           <i class="el-icon-location"></i>
           <span>選項(xiàng)一</span>
        </template>
 
        <!-- 第一種分組 -->
        <el-menu-item-group>
            <template slot="title">選項(xiàng)一 - 分組一</template>
            <el-menu-item index="1-1">分組一 選項(xiàng)A</el-menu-item>
            <el-menu-item index="1-2">分組一 選項(xiàng)B</el-menu-item>
        </el-menu-item-group>
 
 
        <!-- 第二種分組 -->
        <el-menu-item-group title="選項(xiàng)一 - 分組二">
              <el-menu-item index="1-3">分組二 選項(xiàng)C</el-menu-item>
        </el-menu-item-group>
 
            
 
        <el-menu-item index="1-4">選項(xiàng)D</el-menu-item>
            
        <el-submenu index="1-5">
              <template slot="title">選項(xiàng)E</template>
              <el-menu-item index="1-5-1">選項(xiàng)E - 選項(xiàng)1</el-menu-item>
        </el-submenu>
 
    </el-submenu>
</el-menu>

第一種和第二種分組方式的差別：

第一種以 template 標(biāo)簽方式聲明了組的名稱

第二種以 munu-item-group 的 title 屬性的方式聲明

里面的子導(dǎo)航欄都是采用 <el-menu-item> 標(biāo)簽來聲明的，這里都一樣

上面就是我分析的結(jié)構(gòu)，根據(jù)具體情況看看你需要哪種結(jié)構(gòu)

然后就是說一下屬性：

屬性：

* default-active：表示當(dāng)前active的菜單項(xiàng)的編號
* index：類型為字符串，在每一個el-menu-item組件上都有一個編號，給default-active標(biāo)記

參考： element-ui使用導(dǎo)航欄跳轉(zhuǎn)路由用法

* slot：slot ,就是插入的意思

復(fù)合型輸入框

可前置或后置元素，一般為標(biāo)簽或按鈕

可通過 slot 來指定在 input 中前置或者后置內(nèi)容。

<div>
  <el-input placeholder="請輸入內(nèi)容" v-model="input1">
    <template slot="prepend">Http://</template>
  </el-input>
</div>
<div style="margin-top: 15px;">
  <el-input placeholder="請輸入內(nèi)容" v-model="input2">
    <template slot="append">.com</template>
  </el-input>
</div>
<div style="margin-top: 15px;">
  <el-input placeholder="請輸入內(nèi)容" v-model="input3" class="input-with-select">
    <el-select v-model="select" slot="prepend" placeholder="請選擇">
      <el-option label="餐廳名" value="1"></el-option>
      <el-option label="訂單號" value="2"></el-option>
      <el-option label="用戶電話" value="3"></el-option>
    </el-select>
    <el-button slot="append" icon="el-icon-search"></el-button>
  </el-input>
</div>
<style>
  .el-select .el-input {
    width: 130px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
</style>
<script>
export default {
  data() {
    return {
      input1: '',
      input2: '',
      input3: '',
      select: ''
    }
  }
}
</script>

slot ,就是插入的意思

總結(jié)

到此這篇關(guān)于Element ui中menu組件(el-menu/el-menu-item/el-submenu/template)層級結(jié)構(gòu)與用法的文章就介紹到這了,更多相關(guān)Element ui中menu組件層級結(jié)構(gòu)與用法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: