vue-Element-ui左侧无限级菜单实现

#最近项目中,要用到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
}
]

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

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.js

<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)
    }
    }
}
复制代码

###到此就实现了左侧菜单的无限级了，应为如今给公司写的项目都是权限功能，路由方面呢你们能够随便写，公司项目作了权限：左侧菜单，按钮限制，菜单限制，接口限制目前是四种。

本人只是一个小白，分享在项目中遇到的问题，在百度没有找到好的方法，踩坑分享出来。

有什么代码问题能够留言，过一段会写一个前端监控管理系统，埋点，数据，接口等等问题，很实用。拜拜
复制代码