Vue+elementUI コンポーネントは、折りたたみ可能な動的レンダリングのマルチレベルサイドバーナビゲーションを再帰的に実装します。

かなり前に実装された機能ですが、クリックすると選択したメニュー項目の背景色が白くなることに気付きました。金曜日に注意深く観察したところ、スタイル調整の問題ではなく、オプションが選択されていないことが原因であることがわかりました。そこで、コンポーネントの再帰を注意深く研究し、考えをまとめて記録しました。

1. コンセプト

再帰: 簡単に言えば、再帰とは、入れ子人形のように自分自身を呼び出すことです。子供の頃、再帰原理を使った「ハノイの塔」というゲームをしました。

ここに画像の説明を挿入

関数の再帰: 関数は関数名を使用して独自のコンポーネントの再帰を呼び出します。したがって、コンポーネントの再帰は、vueコンポーネントのname属性を使用して実装されます。

2. 需要

マルチレベルサイドバーナビゲーションの折りたたみ可能な動的レンダリングを実装する

分析

ここに画像の説明を挿入

1. サイドバーのナビゲーションは一度に 1 レベルずつで、2 番目のレベルは最初のレベルの繰り返しに相当することに注意してください。 2. 一部のメニューには下位レベルがあり、一部には下位レベルがないという特徴があります。 3. 動的レンダリングとは、ツリー型データがバックグラウンドインターフェイスから取得され、動的にレンダリングされることを意味します。 4. コードの実装 1. まず、ドキュメント内のデモを実行して試してみましょう。

ドキュメント: 要素のドキュメント

2. 必要なスタイルに変更します。これは最初に書かれたときの様子です。

親コンポーネントサイドバー

<テンプレート>
  <el-menu class="menu-wrap" :default-active="メニューアクティブ名 || 'ホーム'" :active="メニューアクティブ名 || 'ホーム'"
           :collapse="サイドバーを折りたたむ" :collapseTransition="false" :unique-opened="true" @select="selectItem">
    <テンプレート>
      <el-menu-item @click="サイドバー折りたたみ = !サイドバー折りたたみ">
        <i v-show="!sidebarFold" class="el-icon-s-fold"></i>
        <i v-show="サイドバー折りたたみ" class="el-icon-s-unfold"></i>
        <span slot="title" class="sidebar-one">ナビゲーション リスト</span>
      </el-menu-item>
    </テンプレート>
<!-- <サイドバー項目 :list="メニューリスト"></サイドバー項目>-->
    <template v-for="(item,index) in menuList" class="menu">
      <!-- タイトル -->
      <テンプレート v-if="item.children.length">
        <el-submenu :key="index" :index="item.id" class="サブメニュー項目">
          <テンプレート:index="item.index" slot="title">
            <!-- <i :class="item.icon"></i>-->
            <i class="iconfont icon-danganjianying"></i>
            <span>{{アイテム名}}</span>
          </テンプレート>
          <el-menu-item-group class="メニュー項目グループ">
            <サイドバー項目:list="item.children"></サイドバー項目>
          </el-menu-item-group>
        </el-サブメニュー>
      </テンプレート>
      <!-- オプション -->
      <テンプレート v-else>
        <el-menu-item :key="index" :index="item.id" class="menu-item">
          <!-- <i :class="item.icon"></i>-->
          <i class="iconfont icon-danganjianying"></i>
          <span>{{アイテム名}}</span>
        </el-menu-item>
      </テンプレート>
    </テンプレート>
  </el-menu>
</テンプレート>

<スクリプト>

エクスポートデフォルト{
  名前: 'サイドバー',
  コンポーネント:
    サイドバーアイテム: () => import('@/components/common/SideBarItem')
  },
  データ （） {
    戻る {

    }
  },
  マウントされた（）{
  },
  メソッド: {
    selectItem(名前, パス){
      // アラート(名前)
      this.$router.push(パス)
      this.$store.commit('common/updateMenuActiveName', 名前)
    }
  },
  計算: {
    メニューリスト: {
      得る （） {
        this.$store.state.common.menuList を返します
      },
      設定(値) {
        this.$store.commit('common/updateMenuList', val)
      }
    },
    メニューアクティブ名: {
      get() { this.$store.state.common.menuActiveName を返す },
      設定 (val) { this.$store.commit('common/updateMenuActiveName', val) }
    },
    サイドバー折りたたみ: {
      get() {this.$store.state.common.sidebarFold; を返します},
      設定(val) {this.$store.commit("common/updateSidebarFold", val);}
    },
  },
}
</スクリプト>
<style lang="less" スコープ>
.メニューラップ{
  幅: 200ピクセル;
  最小高さ: 1020px;
  背景: url('../../assets/img/sidebar_bg.png') 繰り返しなし;
  背景サイズ: 100% 100%;
}

/deep/ .el-menu{
  背景色: 透明 !重要;
  .アイコンフォント{
    フォントサイズ: 18px;
    垂直方向の位置合わせ: サブ;
    右マージン: 5px;
    表示: インラインブロック;
    幅: 20px;
    テキスト配置: 中央;
  }
}

/deep/ .el-メニュー項目、
/deep/ .el-submenu__title{
  色: #fff;

  .アイコンフォント{
    色: #fff;
  }
}

/deep/ .el-menu-item スパン、
/deep/ .el-submenu__title span{
  左パディング: 10px;
}

/deep/ .el-menu-item.is-active {
  -webkit-box-shadow: インセット 5px 100px 0px -2px #0064B6;
  ボックスシャドウ: インセット 5px 100px 0px -2px #0064B6;
}

/deep/ .el-submenu__title:hover、
/deep/ .el-menu-item:hover{
  背景: #0064B6;
}

/deep/ .el-menu-item-group__title{
  パディング: 0;
}

</スタイル>

サブコンポーネント SideBarItem

<テンプレート>
  <div class="メニュー">
    <template v-for="(item,index) in list">
      <!-- タイトル -->
      <テンプレート v-if="item.children.length">
        <el-submenu :key="index" :index="item.id" class="サブメニュー項目">
          <テンプレート:index="item.index" slot="title">
<!-- <i :class="item.icon"></i>-->
            <i class="iconfont icon-danganjianying"></i>
            <span>{{アイテム名}}</span>
          </テンプレート>
          <el-menu-item-group class="メニュー項目グループ">
            <サイドバー項目:list="item.children"></サイドバー項目>
          </el-menu-item-group>
        </el-サブメニュー>
      </テンプレート>
      <!-- オプション -->
      <テンプレート v-else>
        <el-menu-item :key="index" :index="item.id" class="menu-item" @click="selectItem(item.name, item.path)">
<!-- <i :class="item.icon"></i>-->
          <i class="iconfont icon-danganjianying"></i>
          <span>{{アイテム名}}</span>
        </el-menu-item>
      </テンプレート>
    </テンプレート>
  </div>
</テンプレート>
<スクリプト>

エクスポートデフォルト{
  名前: 'サイドバーアイテム',
  // プロパティ: ['リスト'],
  小道具: {
    リスト: {
      タイプ: 配列 || ''
    }
  },
  データ （） {
    戻る {
      ツリーデータ: [{
        ラベル: '州'、
        子供たち： [{
          ラベル:「中国共産党省委員会」
          // 子供たち： [{
          // ラベル: 'レベル 3 1-1-1'
          // }]
        }, {
          ラベル: 「中国共産党省事務所」
        }, {
          ラベル:「中国共産党のある省の組織部」
        }
        ]
      }
      ]、
      isShow: 偽
      // メニューリスト: []
    }
  },
  マウントされた（）{
    this.loadSysMenu()
  },
  メソッド: {
    システムメニューをロードする（）{
      // console.log('menu', this.menuList)
    },
    // personManage (名前) {
    // if (name === '人事管理') {
    // this.isShow = !this.$store.state.common.rbflag
    // // アラート('111' + this.isShow)
    // this.$store.commit('common/updateShowRbox', this.isShow)
    // }
    // },
    selectItem(名前, パス){
      // アラート(名前)
      this.$router.push(パス)
      this.$store.commit('common/updateMenuActiveName', 名前)
    }
  },
}
</スクリプト>
<style lang="less" スコープ>
。メニュー{
  幅: 100%;

  .sub-menu-item /deep/ .el-submenu__title,
  .メニュー項目{
    高さ: 60px;
    行の高さ: 60px;
    テキスト配置: 左;
    //パディング左: 30px !重要;
    //border-bottom: 1px 実線 #000;
    //右境界線: 1px 実線 #000;
    色: #fff;
  }

  .サブメニュー項目 .elメニュー項目{
    右パディング: 0;
  }

 /deep/ .el-menu-item .is-active{
    背景色: #0087df;
  }

  .メニュー項目:ホバー、
  /deep/ .el-submenu__title:hover{
    背景色: #0087df;
  }

  .メニュー項目スパン、
  .sub-menu-item /deep/ .el-submenu__title>span{
    フォントの太さ: 700;
  }

  .menu-item-group /deep/ .el-menu-item-group__title{
    パディング: 0 !重要;
  }

  .メニュー項目グループ .メニュー項目{
    背景: url('../../assets/img/sidebar_bg.png') 繰り返しなし;
  }

  .el-メニュー項目グループ span{
    フォントの太さ: 標準;
  }

}

</スタイル>

後で、折りたたみが成功せず、選択した項目のスタイルが選択後に変更されないことがわかりました。後で、選択されていないことがわかりました。調査後、div の余分なレイヤーがネストされていたためであり、el-menu-item-group プロジェクトではこれが必要なかったため、改善は次のようになりました。

親コンポーネントサイドバー

<テンプレート>
  <el-menu class="menu-wrap" :default-active="menuActiveName" :collapse="sidebarFold" :collapseTransition="false" :unique-opened="true">
    <テンプレート>
      <el-menu-item @click="foldSideBar">
        <i v-show="!sidebarFold" class="el-icon-s-fold"></i>
        <i v-show="サイドバー折りたたみ" class="el-icon-s-unfold"></i>
        <span slot="title" class="sidebar-one">ナビゲーション リスト</span>
      </el-menu-item>
    </テンプレート>
    <side-bar-item v-for="menuList 内のメニュー" :key="menu.id" :menu="メニュー"></side-bar-item>
  </el-menu>
</テンプレート>

<スクリプト>

エクスポートデフォルト{
  名前: 'サイドバー',
  コンポーネント:
    サイドバーアイテム: () => import('@/components/common/SideBarItem')
  },
  データ （） {
    戻る {
    }
  },
  マウントされた（）{
  },
  メソッド: {
    折り畳みサイドバー(){
      this.sidebarFold = !this.sidebarFold
      this.menuActiveName = 'NAV'
    }
  },
  計算: {
    メニューリスト: {
      得る （） {
        this.$store.state.common.menuList を返します
      },
      設定(値) {
        this.$store.commit('common/updateMenuList', val)
      }
    },
    メニューアクティブ名: {
      得る （） {
        console.log(this.$store.state.common.menuActiveName)
        this.$store.state.common.menuActiveName を返します
      },
      設定(値) {
        this.$store.commit('common/updateMenuActiveName', val)
      }
    },
    サイドバー折りたたみ: {
      get() {this.$store.state.common.sidebarFold; を返します},
      設定(val) {this.$store.commit("common/updateSidebarFold", val);}
    },
  },
}
</スクリプト>
<style lang="less" スコープ>
.メニューラップ{
  幅: 200ピクセル;
  最小高さ: 1020px;
  背景: url('../../assets/img/sidebar_bg.png') 繰り返しなし;
  背景サイズ: 100% 100%;
}

/deep/ .el-menu{
  背景色: 透明 !重要;
  .アイコンフォント{
    フォントサイズ: 18px;
    垂直方向の位置合わせ: サブ;
    右マージン: 5px;
    表示: インラインブロック;
    幅: 20px;
    テキスト配置: 中央;
  }
}

/deep/ .el-メニュー項目、
/deep/ .el-submenu__title{
  色: #fff;

  .アイコンフォント{
    色: #fff;
  }
}

/deep/ .el-menu-item スパン、
/deep/ .el-submenu__title span{
  左パディング: 10px;
}

/deep/ .el-menu-item.is-active {
  -webkit-box-shadow: インセット 5px 100px 0px -2px #0064B6;
  ボックスシャドウ: インセット 5px 100px 0px -2px #0064B6;
}

/deep/ .el-submenu__title:hover、
/deep/ .el-menu-item:hover{
  背景: #0064B6;
}

</スタイル>

サブコンポーネント SideBarItem

<テンプレート>
    <!-- このメニューの下にサブメニューがあります-->
    <el-submenu v-if="menu.children.length" :index="menu.code" :popper-append-to-body=false>
        <テンプレートスロット="タイトル">
            <i class="iconfont icon-danganjianying"></i>
            <span>{{ メニュー名 }}</span>
        </テンプレート>
        <side-bar-item v-for="menu.children 内の項目" :key="item.id" :menu="項目"></side-bar-item>
    </el-サブメニュー>
    <!-- このメニューの下にはサブメニューはありません-->
    <el-menu-item v-else :index="menu.code" @click="selectItem(menu.code, menu.path)">
        <i class="iconfont icon-danganjianying"></i>
        <span>{{ メニュー名 }}</span>
    </el-menu-item>
</テンプレート>
<スクリプト>

エクスポートデフォルト{
  名前: 'サイドバーアイテム',
  // プロパティ: ['menu'],
  小道具: {
      メニュー：
      タイプ: オブジェクト || {}
    }
  },
  データ （） {
    戻る {

    }
  },
  マウントされた（）{
  },
  メソッド: {
    selectItem(コード、パス){
      // アラート(名前)
      console.log(コード、パス)
      this.$router.push(パス)
      this.$store.commit('common/updateMenuActiveName', コード)
    }
  },
}
</スクリプト>
<style lang="less" スコープ>
。メニュー{
  幅: 100%;

  .メニュー項目{
    高さ: 60px;
    行の高さ: 60px;
    テキスト配置: 左;
    色: #fff;
  }

  .サブメニュー項目 .elメニュー項目{
    右パディング: 0;
  }

 /deep/ .el-menu-item .is-active{
    背景色: #0087df;
  }

  .menu-item:hover{
    背景色: #0087df;
  }

  .メニュー項目スパン{
    フォントの太さ: 700;
  }

}

</スタイル>

機能は基本的に実装されていますが、バグがあります。マウスが折り目をクリックすると、特定のイベントが周期的に呼び出され、スタックオーバーフローエラーが発生します。記事を表示するには、サブメニューの属性を設定するだけです：popper-append-to-body="false"。記事を参照してください：Element-ui NavMenuサブメニューは再帰生成を使用してエラーを使用します

最後に、簡単なテストデータを添付します。

テストデータ: [
            {"id":"34161C2E8-7348-4439-8899-9A8039AE6AE4","pid":"0","code":"HOME","name":"Home","path":"/home","type":null,"icon":null,"sysId":"2761C2E8-7348-4439-8899-9A8039AE6AE3","orderNo":0,"isCheck":null,"children":[]},
            {"id":"703DBEBD-F92C-4347-9203-F60A73153C3F","pid":"0","code":"WD","name":"温度","path":"/温度","type":null,"icon":null,"sysId":"2AB00274-73DF-459A-A02E-C79A4D8A8929","orderNo":0,"isCheck":null,"children":[]},
            {"id":"73660AB4-48D3-4BDB-86FD-C8397D4D54EC","pid":"0","code":"BJ","name":"アラーム","path":"/alarm","type":null,"icon":null,"sysId":"2AB00274-73DF-459A-A02E-C79A4D8A8929","orderNo":0,"isCheck":null,
              "子供たち"：[
                {"id":"1C99333D-886F-4AD6-93C4-7C5244E48247","pid":"73660AB4-48D3-4BDB-86FD-C8397D4D54EC","code":"FD","name":"盗難防止","path":"/burg","type":null,"icon":null,"sysId":"3691C2E8-8848-4439-8899-9A8039AE6AB5","orderNo":0,"isCheck":null,"children":[]},
                {"id":"1DBDF678-F51F-444A-B995-61E5D9CCA5AF","pid":"73660AB4-48D3-4BDB-86FD-C8397D4D54EC","code":"JL","name":"アラームベル","path":"/bell","type":null,"icon":null,"sysId":"3691C2E8-8848-4439-8899-9A8039AE6AB5","orderNo":0,"isCheck":null,"children":[]},
                {"id":"BFC8C2E1-0E5B-4EEE-B91D-3DABC63FF481","pid":"73660AB4-48D3-4BDB-86FD-C8397D4D54EC","code":"JS","name":"immersion","path":"/immersion","type":null,"icon":null,"sysId":"3691C2E8-8848-4439-8899-9A8039AE6AB5","orderNo":0,"isCheck":null,"children":[]},
                {"id":"BFC8C2E1-0E5B-4EEE-B91D-3DABC63FF482","pid":"73660AB4-48D3-4BDB-86FD-C8397D4D54EC","code":"MJ","name":"アクセス制御","path":"/punch","type":null,"icon":null,"sysId":"3691C2E8-8848-4439-8899-9A8039AE6AB5","orderNo":0,"isCheck":null,"children":[]},
                {"id":"BFC8C2E1-0E5B-4EEE-B91D-3DABC63FF483","pid":"73660AB4-48D3-4BDB-86FD-C8397D4D54EC","code":"ZT","name":"State","path":"/state","type":null,"icon":null,"sysId":"3691C2E8-8848-4439-8899-9A8039AE6AB5","orderNo":0,"isCheck":null,"children":[]}
              ]
            },
            {"id":"34161C2E8-7348-4439-8899-9A8039AE6AE5","pid":"0","code":"GZ","name":"Work","path":"/work","type":null,"icon":null,"sysId":"3691C2E8-8848-4439-8899-9A8039AE6AB5","orderNo":0,"isCheck":null,
              "子供たち"：[]
            },
            {"id":"0CD6B09A-AA43-4AE9-9AC7-29BC5AC83495","pid":"0","code":"SJ","name":"データ据","path":"/data","type":null,"icon":null,"sysId":"2AB00274-73DF-459A-A02E-C79A4D8A8929","orderNo":0,"isCheck":null,
              "子供たち"：[]
            },
            {"id":"049C670D-A33E-4188-9206-B3F3B5DDE77B","pid":"0","code":"SP","name":"视频","path":"/video","type":null,"icon":null,"sysId":"3691C2E8-8848-4439-8899-9A8039AE6AB5","orderNo":0,"isCheck":null,"children":[]},
            {"id":"0A15DBB6-3241-4C7F-AAD4-5417E7BBECAA","pid":"0","code":"RZ","name":"Log","path":"/log","type":null,"icon":null,"sysId":"2AB00274-73DF-459A-A02E-C79A4D8A8929","orderNo":0,"isCheck":null,
              "子供たち"：[]
            }
          ]

効果は以下のようになります。

ここに画像の説明を挿入

折りたたんだ後は、次のようになります。

ここに画像の説明を挿入

これで、vue+elementUI コンポーネントによる折りたたみ可能な動的レンダリングマルチレベルサイドバーナビゲーションの再帰実装に関するこの記事は終了です。elementUI 折りたたみ可能な動的サイドバーナビゲーションに関するその他の関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: