element多級菜單動態(tài)顯示的實現(xiàn)

更新時間：2023年11月07日 15:37:17 作者：_Jyann_

通常在后臺管理系統(tǒng)中,需要根據(jù)每個用戶不同的權(quán)限來動態(tài)展示菜單,本文主要介紹了element多級菜單動態(tài)顯示的實現(xiàn),具有一定的參考價值,感興趣的可以了解一下

elmentUI原本寫法：

<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-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="4">
        <i class="el-icon-setting"></i>
        <span slot="title">導航四</span>
      </el-menu-item>
    </el-menu>

使用遞歸組件寫法：

主要思路：

通過數(shù)據(jù)查找hasOneChild()判斷是否有children，有證明有子菜單，有子菜單使用el-submenu封裝的組件
SidebarItem.vue組件內(nèi)部調(diào)用自己的組件；
渲染元素組件Item.vue使用函數(shù)式組件寫法；

    <template v-if="hasOneChild(item.children, item) && (!oneChild.children || oneChild.noShowChild)">
      <app-link v-if="item.redirect != 'noRedirect' &&  item.meta" :to="resolvePath(item.path)">
        <el-menu-item :index="resolvePath(item.path)" class="submenu-title-noDropdown">
          <Item v-if="item.meta" :icon="item.meta.icon" :title="item.meta.title"></Item>
        </el-menu-item>
      </app-link>
    </template>

    <!-- 有子菜單:有多個children -->
    <el-submenu v-else :index="resolvePath(item.path)">
      <template slot="title" v-if="item.meta">
          <!-- 沒有組件數(shù)據(jù)要處理可以使用函數(shù)式組件進行渲染 -->
          <Item :icon="item.meta.icon" :title="item.meta.title"></Item>
      </template>
      <!-- el-submenu里面還有多級菜單 -->
      <sidebar-item
        v-for="child in item.children"
        :key="child.path"
        :item="child"
        :base-path="resolvePath(child.path)"
        class="nest-menu"
      ></sidebar-item>
    </el-submenu>

 // 判斷當前菜單是否有子菜單
    hasOneChild(children = [], item) {
      // 判斷如果菜單是隱藏直接不顯示
      // if(item.hidden) return false;
      if (children.length === 0) return false;
      const showChildArr = children.filter(child => {
        console.log(child);

        if (child.hidden) return false;
        else return true;
      });

      // 沒有找到child說明沒有子菜單
      if (showChildArr.length === 0) {
        this.oneChild = { ...item, path: item.path, noShowChild: true };
        return true;
      }
      console.log(this.oneChild, "this.oneChild");

      return false;
    },

函數(shù)式組件Item.vue寫法：

functional:true定義組件為函數(shù)式組件；
props接收父級傳入屬性；
render函數(shù)生成虛擬節(jié)點；

<script>
export default {
  name: "Item",
  functional: true,
  // 組件傳入的數(shù)據(jù)
  props: {
    title: {
      type: String,
      default: ""
    },
    icon: {
      type: String,
      default: ""
    }
  },
  // render函數(shù)生成虛擬節(jié)點
  render(h, context) {
    //  <i class="iconfont el-icon-location"></i>
    // <span>{{item.meta.title}}</span>
    const { title, icon } = context.props; //獲取傳入的屬性
    const vNode = [];
    if (icon) {
      const iconClass = `iconfont ` + icon;
      vNode.push(<i class={iconClass} style="font-size:18px;"></i>);
    }
    if (title) {
      // JSX語法
      vNode.push(<span style="margin-left:8px;">{title}</span>);
    }
    return vNode;
  }
};
</script>

到此這篇關于elment多級菜單動態(tài)顯示的實現(xiàn)的文章就介紹到這了,更多相關elment多級菜單動態(tài)顯示內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: