tzs
tzs
侠客
侠客
  • 最后登录2023-07-24
  • 发帖数12
阅读:1345回复:0

[vue]vue+element 动态菜单

楼主#
更多 发布于:2023-04-13 20:43
//数据文件

[
  {
    "_id": "600d4075e218daaf4ec77e52",
    "menuType": "1",
    "menuName": "系统管理",
    "path": "/system",
    "icon": "el-icon-setting",
    "children": [
      {
        "_id": "600d525e602f452aaeeffcd9",
        "menuType": "1",
        "menuName": "用户管理",
        "path": "/system/user",
        "children": [
          {
            "_id": "6030ca8f93f0e159c8390f0c",
            "menuType": "2",
            "menuName": "新增",
            "menuCode": "user-create"
          },
          {
            "_id": "603226d9257d15a8c54cf9f8",
            "menuType": "2",
            "menuName": "批量删除",
            "menuCode": "user-delete"
          },
          {
            "_id": "603253e0a821c6bb59084541",
            "menuType": "2",
            "menuName": "查看",
            "menuCode": "user-query"
          }
        ]
      },
      {
        "_id": "601bc4f8a794e23c2e42efa9",
        "menuType": "1",
        "menuName": "菜单管理",
        "path": "/system/menu",
        "children": [
          {
            "_id": "60325400a821c6bb59084543",
            "menuType": "2",
            "menuName": "查看",
            "menuCode": "menu-query"
          },
          {
            "_id": "6032540fa821c6bb59084544",
            "menuType": "2",
            "menuName": "创建",
            "menuCode": "menu-create"
          }
        ]
      }
    ]
  },
  {
    "_id": "601b9eb25929c81a1f988bb0",
    "menuType": "1",
    "menuName": "审批管理",
    "path": "/audit",
    "icon": "el-icon-s-promotion",
    "children": [
      {
        "_id": "601bc763a794e23c2e42efaa",
        "menuType": "1",
        "menuName": "休假申请",
        "path": "/audit/leave",
        "children": [
          {
            "_id": "603254a8a821c6bb59084549",
            "menuType": "2",
            "menuName": "查看",
            "menuCode": "leave-query"
          },
          {
            "_id": "603254baa821c6bb5908454a",
            "menuType": "2",
            "menuName": "申请休假",
            "menuCode": "leave-create"
          }
        ]
      }
    ]
  }
]





<!--思路 :

1. 获取传递进来的数据
2. 使用 el-sub-menu 进行一个遍历 , 遍历传递过来的所有数据, 并且判断他是否有 children , 如果有children
  则使用 munuName 生成一个组
3. 递归判断是否有多级 children , 如果有 则继续生成下一级菜单
4. 判断到最后一个层级 , 如果说 没有children的 情况下,这个肯定是可以 按钮 ,而不是一个组 所以, 这个应该用 el-menu-item 进行渲染

-->



<template>
  <div>
    <template v-for="item in treeData">
      <el-submenu
        :index="item._id"
        v-if="item.children && item.children.length > 0">
        <template slot="title">
          <i :class="item.icon"></i>
          <span>pw_item.menuName</span>
        </template>
        <TreeMenu :treeData="item.children"></TreeMenu> //递归,在此组件内用此组件,父传子,组件传参
      </el-submenu>
      <el-menu-item
          v-else
          :index="item.path"
          :key="item._id"
      >
        pw_item.menuName
      </el-menu-item>
    </template>
  </div>
</template>

<script>
export default {
  name: "TreeMenu",
  props:{
    treeData:{
      type:Array,
      default:function(){
        return []
      }
    }
  }
}
</script>

<style scoped>

</style>

[tzs于2023-04-14 08:54编辑了帖子]
游客


返回顶部

公众号

公众号