|
//数据文件
[ { "_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编辑了帖子]
|
|
公众号
