彼女は直進愛は後悔過去の半分以上、決定した外観を持っているからペースを加速するために気にしない、振り返ることがありませんでした

いくつかの単語の男は（バックエンドによって返されたデータをレンダリング）、メニューバーの権限を言いました

背景返されたデータ構造（未処理 よるとPARENTIDが分離親子メニューにヌル親と子供はありません）

[　　

　　{
　　　　"ID"：352、
　　　　"PARENTID"：347、
　　　　"名前"： "出场记录"、
　　　　"URL"： "/ grouplessonschedule /リスト"、
　　　　"urlMethod"： "POST"、
　　　　"コンポーネント"：「コンポーネント/ syllabusLeagueClass / index.vue "
　　}、
　　{
　　　　"ID"：392、
　　　　"PARENTID"：NULL、
　　　　"名前"： "出场资格"、
　　　　"URL"：ヌル、
　　　　"urlMethod"：ヌル、
　　　　"コンポーネント"、"コンポーネント/フィードバック/インデックス.vue」
　　}

]

サイドナビゲーションデータ構造（構造childrenMenuLisが処理指定は、2つを持っているがある場合、メニューは、説明する場合は空です）。

[

　　{　　　

　　　　childrenMenuLis：[]

　　　　コンポーネント： "コンポーネント/楽器/ index.vue "

　　　　ID： "303 "

　　　　名前：「オペレーティング・パネル」

　　　　PARENTID：ヌル

　　　　switchState：真

　　　　URL： "/楽器"

　　　　urlMethod：ヌル

　　}

]

メニューによって返されるデータの処理：

データに：
 //受信データ
menuListVal：[]、//すべてのメニューデータを受信し
、[]、：parentVal //親メニューデータ
 childBtnVal：[]、//子メニューデータ
 parentChildMap：[]、 
イベント：
メニューリストを（ ）{ 
      この .. $ AjaxのGET（" / MENU /リスト"）.then（RES => {
         この .menuListVal = res.data.data; メニューデータ受信//返す
　　　　　　この .menuListVal.filterを（項目=> { // PARENTIDはヌル親子メニューが親（）サブ段階（2）ではない有する分離
          IF（item.parentId == NULL ）{ //親
            この.parentVal.push（項目）;
          } 他の IF（item.parentId = nullを！）{ の//子
            この.childBtnVal.push（項目）; 
          } 
        }）; 
        この .parentVal.filter（項目=> { //フィルタメニューには、属性の追加 
          アイテムを。 switchState = trueに; //は、隠された制御権限表示
           //サブグレードの条件に応じて、空の配列を定義インサート
          items.childrenMenuLis = []; //ストアの2つのメニュー
          この .childBtnVal.filter（itemChild => {
             //すべての子が挿入条件
            IF（items.id == itemChild.parentId）{//メニューアレイ===親に格納された2つの親メニュー定義のID番号2の場合
              items.childrenMenuLis.push（itemChild）; 
            } 
          }）; 
        }）; 
        この .parentChildMap =この.parentVal ; 介して//データCANループ
         //はconsole.log（this.parentChildMap）; 
      }）; 
    } 

（）{作成
    この.menuList（）; 
}

対応に従い、アイコン表示処理:(名）

[

　　{　　　

　　　　childrenMenuLis：配列（0）

　　　　コンポーネント： "コンポーネント/楽器/ index.vue "

　　　　iconClassName：「エル・アイコン・パイチャート」

　　　　ID： "303 "

　　　　インデックス： 1

　　　　名前：「ダッシュボード」

　　　　PARENTID：ヌル

　　　　switchState：真

　　　　URL： "/楽器"

　　　　urlMethod：ヌル

　　}

]

（

　　一マージにおける複数のオブジェクトの二つのアレイ

　　配列、マップメソッドは配列を返し、配列または配列やオブジェクトの前にあるオブジェクトプラス「...」、ES6の新しい文言をマージ

）

data中：
//定义的图标样式
classIcon: [
        { index: 1, iconClassName: "el-icon-pie-chart" },
        { index: 2, iconClassName: "el-icon-takeaway-box" },
        { index: 3, iconClassName: "el-icon-monitor" },
        { index: 4, iconClassName: "el-icon-collection" },
        { index: 5, iconClassName: "el-icon-time" },
        { index: 6, iconClassName: "el-icon-present" },
        { index: 7, iconClassName: "el-icon-s-data" },
        { index: 8, iconClassName: "el-icon-document-copy" },
        { index: 9, iconClassName: "el-icon-key" },
        { index: 10, iconClassName: "el-icon-sell" },
        { index: 11, iconClassName: "el-icon-set-up" },
        { index: 12, iconClassName: "el-icon-unlock" }
],
iconIcon: []

事件中：
menuList() {
    // 将this.parentChildMap里的值与this.classIcon数组里的值合并，通过用户名显示对应图标,并返回新数组
        this.iconIcon = this.parentChildMap.map((item, index) => {
          return { ...item, ...this.classIcon[index] };
　　　　　　//此时iconIcon里面就有name和图标class了可以循环遍历了
    });
}

遍历数据渲染

<el-container>
      <!-- 侧边导航区 -->
      <el-aside width="244px" padding-top="10px" :style="asideStyle">
        <el-row class="tac" width="244px" style="user-select:none;height:100%">
          <el-col :span="12" style="user-select:none;height:100%; width: 101%">
            <el-menu
              default-active="2"
              class="el-menu-vertical-demo"
              background-color="#13141f"
              text-color="#fff"
              active-text-color="#fff"
              router
              style="height:100%"
            >
              <!-- 第一次循环 父级菜单栏显示-->
              <div v-for="(item, index) in parentChildMap" :key="index">
                <!-- 如果item.childrenMenuLis.length大于0说明有子级,先显示父级在触发子级 item.switchState控制导航栏显示隐藏-->
                <el-submenu
                  :index="item.id"
                  v-show="item.switchState"
                  v-if="item.childrenMenuLis.length > 0"
                  style="text-align: left;padding-left: 24px;"
                >
                  <!-- 循环父级菜单的图标 item.name == icon.name如果名称相同就显示对应图标-->
                  <template slot="title">
                    <i
                      v-for="(icon, index) in iconIcon"
                      :key="index"
                      :class="item.name == icon.name ? icon.iconClassName : ''"
                    ></i>
                    <span>{{ item.name }}</span>　　将父级名称显示出来在来触发子级
                  </template>
                  <!-- 循环出子级菜单数据 -->
                  <el-menu-item-group
                    v-for="(itemChild, indexChild) in item.childrenMenuLis"
                    :key="indexChild"
                  >
                    <el-menu-item :index="itemChild.url">{{
                      itemChild.name
                    }}</el-menu-item> 跳转的路由与子级名称
                  </el-menu-item-group>
                </el-submenu>
                <!-- 如果item.childrenMenuLis.length等于0,说明只有一级直接显示 -->
                <el-menu-item
                  v-if="item.childrenMenuLis.length === 0"
                  :index="item.url"
                  style="text-align: left;padding-left: 44px;"
                >
                  <!-- 循环出只有一级的图标 item.name == icon.name如果名称相同就显示对应图标-->
                  <span v-for="(icon1, index1) in iconIcon" :key="index1">
                    <i
                      :key="index1"
                      :class="
                        item.name == icon1.name ? icon1.iconClassName : ''
                      "
                    ></i> </span
                  >{{ item.name }}导航名</el-menu-item
                >
              </div>
            </el-menu>
          </el-col>
        </el-row>
      </el-aside>
    </el-container>

Vueのメニューバーの権限

一マージにおける複数のオブジェクトの二つのアレイ

おすすめ