DDR爱好者之家

vue Element左侧无限级菜单实现
站长资源 2024/11/24 佚名
9 1538
DDR爱好者之家 Design By 杰米

最近项目中,要用到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 ""; //如果存在子级，则给父级添加一个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)
  }
  }
}

到此就实现了左侧菜单的无限级了，应为现在给公司写的项目都是权限功能，路由方面呢大家可以随便写，公司项目做了权限：左侧菜单，按钮限制，菜单限制，接口限制目前是四种。
本人只是一个小白，分享在项目中遇到的问题，在百度没有找到好的方法，踩坑分享出来。

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米