快捷導(dǎo)航

vue遞歸實現(xiàn)三級菜單

更新時間：2021年05月20日 09:13:26 作者：進(jìn)擊的_菜雞

這篇文章主要為大家詳細(xì)介紹了vue遞歸實現(xiàn)三級菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue遞歸實現(xiàn)三級菜單的具體代碼，供大家參考，具體內(nèi)容如下

父組件

<template>
    <div class="menu-level-menu menu-level-menu-enter"  v-if="showLevelMenu">
      <menu-item class="menu-item" :menuDate="menuList"></menu-item>
    </div>
</template>

子組件

<template>
  <div>
    <div class="" v-for="(menu, index) in menuDate" :key="index">
    // 每一個菜單項
      <div class="menu-row" @click="menuSpread(menu)"
           :class="[{'menu-row-selected': menu.selected && menu.children.length <= 0}]">
        <div class="menu-row-left">
          <div class="menu-row-left-line" :class="[{'menu-selected': menu.selected && menu.children.length <= 0}]"></div>
          <i class="iconfont" :class="[menu.menuIcon, {'color-icon': showIconColor(menu)}]"></i>
        </div>
        <div class="menu-row-right">
          <span :class="[{'font-16': menu.level === '0'}]">{{menu.menuName}}</span>
          <i class="c" v-if="menu.children.length <= 0"></i>
          <i class="iconfont icon-liebiaoxiala" v-if="menu.children.length>0 && !menu.selected"></i>
          <i class="iconfont icon-liebiaoshouqi" v-if="menu.children.length>0 && menu.selected"></i>
        </div>
      </div>
      // 遞歸展示菜單
      <menu-item v-show="menu.selected" v-if="menu.children.length>0" :menuDate="menu.children"></menu-item>
    </div>
  </div>
</template>
<script>
  export default {
    props: {
      menuDate: Array
    },
    name: 'MenuItem',
    methods: {
      menuSpread (menu) {
        if (menu.menuRouter) this.$router.push(menu.menuRouter);
        menu.selected = !menu.selected;
        this.recursion(this.menuDate, menu);
      },
      recursion (all, temp) {
        all.forEach(item => {
          if (item.menuName !== temp.menuName) {
            item.selected = false;
            this.recursion(item.children, temp);
          }
        });
      },
      showIconColor (menu) {
        let show = false;
        if (menu.level === '0') {
          menu.children.forEach(item => {
            if (item.children.length <= 0 && item.selected) {
              show = true;
            }
            if (item.children.length > 0) {
              item.children.forEach(item => {
                if (item.selected) {
                  show = true;
                }
              });
            }
          });
        }
        return show;
      }
    }
  };
</script>

效果圖

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue組件間的雙向綁定示例解析
這篇文章主要介紹了Vue組件間的雙向綁定，我們都知道當(dāng)父組件改變了某個值后，如果這個值傳給了子組件，那么子組件也會自動跟著改變，但是這是單向的，使用v-bind的方式，即子組件可以使用父組件的值，但是不能改變這個值
2023-03-03
Vue el-autocomplete遠(yuǎn)程搜索下拉框并實現(xiàn)自動填充功能(推薦)
在elementui Input輸入框中可以找到遠(yuǎn)程搜索組件，獲取服務(wù)端的數(shù)據(jù)。這篇文章主要給大家介紹Vue el-autocomplete遠(yuǎn)程搜索下拉框并實現(xiàn)自動填充功能，感興趣的朋友一起看看吧
2019-10-10
Vue實現(xiàn)一個動態(tài)添加行的表格步驟詳解
在Vue組件中定義表格的數(shù)據(jù)模型,通常使用一個數(shù)組來存儲表格的數(shù)據(jù),每一行數(shù)據(jù)可以是一個對象,對象的屬性對應(yīng)表格的列,這篇文章主要介紹了Vue實現(xiàn)一個動態(tài)添加行的表格步驟詳解,需要的朋友可以參考下
2024-05-05
如何利用vue實現(xiàn)css過渡和動畫
過渡Vue在插入、更新或者移除 DOM 時,提供多種不同方式的應(yīng)用過渡效果這篇文章主要給大家介紹了關(guān)于如何利用vue實現(xiàn)css過渡和動畫的相關(guān)資料,需要的朋友可以參考下
2021-11-11
vue使用keep-alive無效以及include和exclude用法解讀
這篇文章主要介紹了vue使用keep-alive無效以及include和exclude用法解讀，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-07-07
解讀計算屬性和watch監(jiān)聽的區(qū)別及說明
計算屬性是基于它們的依賴進(jìn)行緩存的,只有在它的相關(guān)依賴發(fā)生改變時才會重新求值,而watch則是一個更為通用的監(jiān)聽器,它可以在數(shù)據(jù)變化時執(zhí)行異步操作或開銷較大的操作
2025-01-01
Vant?Weapp組件picker選擇器初始默認(rèn)選中問題
這篇文章主要介紹了Vant?Weapp組件picker選擇器初始默認(rèn)選中問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-01-01
詳解vue 模版組件的三種用法
本篇文章主要介紹了詳解vue 模版組件的三種用法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-07-07
講解vue-router之什么是編程式路由
編程式路由在我們的項目使用過程中最常用的的方法了。這篇文章主要介紹了講解vue-router之什么是編程式路由，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-05-05
通過實例解析vuejs如何實現(xiàn)調(diào)試代碼
這篇文章主要介紹了通過實例解析vuejs如何實現(xiàn)調(diào)試代碼,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2020-07-07