如何用vue-Element-ui实现左侧无限级菜单？本文详细教你

Dear 丶 2023-02-17 03:25 8阅读 0赞

# \#最近项目中,要用到element-ui的无限级分类菜单，根据角色生成不同的递归数据，查阅了网上很多资料，发现很多都不太完整并且没有很多的延伸性。 #

\#\#\#梳理递归数据

我们一般拿到后台的数据是：1.扁平化数据格式
    2.递归式数据格式
    复制代码

let arr = [
    {
        name:小七,
        id:1
    },
    {
        name:小八,
        id:2
    },
    {
        name: 小九,
        id:3
    }
    ]
    
    我们从后台拿到的是这种扁平化处理数据，那我们实现递归菜单的话需要什么数据格式呢，需要格式如下：
    
    let menuItems =  [
    {
        name:小七,
        id:1,
        children:[
            {
                name: '啥也不是',
                pid:2
            }
        ]
    },
    {
        name:小八,
        id:2,
        children:[
            {
                name:'随便写哦',
                pid:3,
                children:[
                    {
                        name: '再次深入',
                        pid: 4,
                        children:[
                            {
                                name: '撒打算',
                                pid:666
                            }
                        ]
                    }
                ]
            }    
        ]
    },
    {
        name: 小九,
        id:3

我是08年出道的前端老鸟，有问题或者交流经验可以进我的扣扣裙 519293536 我都会尽力帮大家

] 我们就需要类似于以上的这种数据格式： 扁平化数据转换递归数据，下面贴出我的数据处理方法： 注：应为在网上看到的许多的递归处理方法都不一样，有的文章写于很早很多方法都比较复杂或者代码比较多余 复制代码

computed: {
        treeData() {
          let cloneData = JSON.parse(JSON.stringify(this.tableData)); // 对源数据深度克隆
          return cloneData.filter(father => {
            let branchArr = cloneData.filter(child => father.id == child.pid); //返回每一项的子级数组
            branchArr.length > 0 ? (father.children = branchArr) : ""; //如果存在子级，则给父级添加一个children属性，并赋值
            return father.pid == 0; //返回第一层
          });
        }
      },
      
      其中this.tableData就是后台给到我的扁平化数据，这里将其替换就可以
      
      当时处理此功能时没有考虑到子级或者父级有可能值位udfriend 所以没有做判断，如果想完善此递归数据处理的可以完善一下。
      
    复制代码

\#\#\#数据处理就要开始写代码了！

这里用到了vue-ement-ui的左侧菜单
    
    老规矩，程序员交流用代码
    复制代码

\#\#index.vue

<el-menu
            background-color="#304156"
            text-color="#fff"
            active-text-color="#409eff"
            :collapse="isActive"
            :collapse-transition="false"
            :unique-opened="true"
            :router="true"
            :default-active="activePath"
          >
            <menu-tree :menuData="treeData" @saveNavStart="saveNavStart"></menu-tree>
          </el-menu>
          
          这里的激活样式用的是缓存的办法
          // 保存链接的激活状态
        saveNavStart(activePath) {
          window.sessionStorage.setItem("activePath", activePath);
          this.activePath = activePath;
        },
        created() {
            this.activePath = window.sessionStorage.getItem("activePath");
        }
    复制代码

### menuTree.vue组件 ###

实现左侧无限级菜单最重要的就是 组件自身调用自身
    废话不多说，上代码:
    
    
    <template>
      <div>
        <label v-for="menu in menuData" :key="menu.id">
          <el-submenu :index="String(menu.id)" v-if="menu.children">
            <template slot="title">
              <i class="el-icon-edit"></i>
              <span>{
       {menu.menu_name}}</span>
            </template>
            <label>
              <menutree :menuData="menu.children"></menutree>
            </label>
          </el-submenu>
          <el-menu-item :index="menu.path" @click="saveNavStart(menu.path)" v-else>
            <i class="el-icon-edit"></i>
            <span>{
       {menu.menu_name}}</span>
          </el-menu-item>
        </label>
      </div>
    </template>
    
    methods:{
        saveNavStart(activePath) {
            this.$emit('saveNavStart',activePath)
        }我是08年出道的前端老鸟，有问题或者交流经验可以进我的扣扣裙 519293536 我都会尽力帮大家
        }
    }
    复制代码

\#\#\#到此就实现了左侧菜单的无限级了，应为现在给公司写的项目都是权限功能，路由方面呢大家可以随便写，公司项目做了权限：左侧菜单，按钮限制，菜单限制，接口限制目前是四种。

本文的文字及图片来源于网络加上自己的想法,仅供学习、交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理