vue+element实现menu组件

最新推荐文章于 2024-11-22 10:49:36 发布

_长歌行

最新推荐文章于 2024-11-22 10:49:36 发布

阅读量1.5k

点赞数 1

分类专栏： vue 文章标签： vue element menu

本文链接：https://blog.csdn.net/Null_Undefined_NaN/article/details/97262758

版权

本文介绍如何利用ElementUI库在Vue项目中创建一个功能完善的左侧菜单组件，通过示例代码展示了具体实现过程，并提供了最终的展示效果。

摘要由CSDN通过智能技术生成

用elementUI做的一个左侧菜单展示，直接上代码：

<template>
    <div class="">
      <!-- 一级菜单循环-->
      <el-menu class="menuLen" v-for="( item1 ,index1 ) in menuList" :unique-opened=true  :router=true :default-active="defaultActive" :key="index1" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
        <el-submenu :index='toSting(index1)' v-if="item1.permission">
          <template slot="title">
            <i :class="[item1.icon]" ></i>
            <span slot="title">{
  { item1.name }}</span>
          </template>
          <!-- 二级菜单循环 -->
          <div  v-for="( item2 ,index2 ) in item1.childList" :key="index1+'-'+index2" >
            <div v-if="item2.permission">
              <el-submenu :index="toSting(index1,index2)">
                <span slot="title">{
  { item2.name }}</span>
                <!-- 三级菜单循环 -->
                <div v-for="( item3 ,index3 ) in item2.childList" :key="index1+'-'+index2+'-'+index3">
                  <el-menu-item :index="item3.path">{
  { item3.name }}</el-menu-item>
                </div>
              </el-submenu>
            </div>
            <div