腳本之家服務器常用軟件

快捷導航

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

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

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

前言

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

初學者，剛接觸，用到不知道怎么回事剛接觸，今天就特意各種粘貼復制示例代碼，終于自己試出來了，具體的結構層級關系。

看完就能知道這個menu的結構上怎么組織和使用

1. 我準備的示例：

先上代碼，格式加了空行，方便看結構：（前期模板組件的導入和注冊都略過了）

<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>導航一</span>
        </template>
 
        <el-menu-item-group>
          <template slot="title">分組一</template>
          <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">
        <i class="el-icon-menu"></i>
        <span slot="title">導航二</span>
      </el-menu-item>
 
      <el-menu-item index="3" disabled>
        <i class="el-icon-document"></i>
        <span slot="title">導航三</span>
      </el-menu-item>
 
      <el-menu-item index="4">
        <i class="el-icon-setting"></i>
        <span slot="title">導航四</span>
      </el-menu-item>
 
</el-menu>

2. 好戲正式開始：

看上面的示例代碼，最外面一層是由 <el-menu> </el-menu> 標簽包裹的，先從簡單的開始，看倒數(shù)一二三，后面那三個導航，因為都是最簡單的結構，

僅一級導航欄

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

<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">導航二</span>
      </el-menu-item>
      
</el-menu>

只有一個導航欄，沒別的了

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

一級導航欄 + 一級導航欄下的子導航欄

觀察最開始官方element ui 給的案例，應該是和第一個導航欄有關，我們拿那一部分做嘗試，

這個是用 <el-submenu></el-submenu> 標簽包裹的

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

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

竟然我要的一級導航標題到了里面，不對不對, 再回頭看下示例，

先試下紅色圈出的部分，添加上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>
        子導航欄
 
     </el-submenu>
 
</el-menu>

點開后：看起來還ok吧，

但就是子導航欄的格式有點問題，不是我們想要的效果，不過一級導航欄的顯示是有了，看來這個 template 標簽是用來控制 submenu 的對應的那級的導航欄內(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>
 
        子導航欄
 
        <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>

點開后：出了個選項一，

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

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

一級導航欄+子導航欄組

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

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

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

<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>選項一</span>
        </template>
 
        <!-- 第一種分組 -->
        <el-menu-item-group>
            <template slot="title">選項一 - 分組一</template>
            <el-menu-item index="1-1">分組一 選項A</el-menu-item>
            <el-menu-item index="1-2">分組一 選項B</el-menu-item>
        </el-menu-item-group>
 
 
        <!-- 第二種分組 -->
        <el-menu-item-group title="選項一 - 分組二">
              <el-menu-item index="1-3">分組二 選項C</el-menu-item>
        </el-menu-item-group>
 
            
 
        <el-menu-item index="1-4">選項D</el-menu-item>
            
        <el-submenu index="1-5">
              <template slot="title">選項E</template>
              <el-menu-item index="1-5-1">選項E - 選項1</el-menu-item>
        </el-submenu>
 
    </el-submenu>
</el-menu>

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

第一種以 template 標簽方式聲明了組的名稱

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

里面的子導航欄都是采用 <el-menu-item> 標簽來聲明的，這里都一樣

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

然后就是說一下屬性：

屬性：

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

參考： element-ui使用導航欄跳轉路由用法

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

復合型輸入框

可前置或后置元素，一般為標簽或按鈕

可通過 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 ,就是插入的意思

總結

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

您可能感興趣的文章: