VUE3—无限级菜单渲染

场景：

从后台api查询菜单数据，渲染到界面，比如后台管理系统的左侧的树形菜单，如果用v-for或者if去判断的话，如果层级很多的情况下，会造成代码冗余。所以这个时候可以使用组件的方式，通过组件内递归达到代码的简洁，也方便调用和修改

解决办法：

在项目components文件夹中创建文件夹menu，在menu文件夹下创建menuTree.vue文件。

menuTree.vue

<template><div><template v-for="item in props.menuList" :key="item.path"><el-sub-menu :index="item.path" v-if="item.children"><template #title><span>{{ item.name }}</span></template><!-- 如果有子菜单，则递归渲染 --><MenuTree :menuList="item.children"></MenuTree></el-sub-menu><!--      没有子菜单--><el-menu-item :index="item.path" v-if="!item.children" @click="$router.push({ path: item.path })"><span>{{ item.name }}</span></el-menu-item></template></div>
</template>
<script setup >
import { defineProps } from 'vue'
const props = defineProps(['menuList'])
</script>
<style>
</style>

在view文件夹下的页面中调用组件

index.vue

<template><el-menu class="el-menu-vertical-demo"><menuTree :menuList="menus"></menuTree></el-menu>
</template><script setup>
import {ref
} from 'vue'
import menuTree from "@/components/menu/menuTree.vue"
import {getMenuList,
} from "@/api/menu/index.js"// 模拟数据，实际生产环境为从后台api获取
const menus = ref([{"id": 110,"parent_id": 0,"name": "用户管理","icon": "el-icon-user-solid","rule_url": "user/default","children": [{"id": 50,"parent_id": 110,"name": "角色管理","icon": "el-icon-edit","rule_url": "admin/role"},{"id": 111,"parent_id": 110,"name": "管理员","icon": "el-icon-s-custom","rule_url": "admin/user"},{"id": 124,"parent_id": 110,"name": "本站用户","icon": "el-icon-user","rule_url": "user/custom"},{"id": 127,"parent_id": 110,"name": "第三方用户","icon": "el-icon-chat-dot-round","rule_url": "user/third"}]},{"id": 2,"parent_id": 0,"name": "系统设置","icon": "el-icon-edit","rule_url": "admin/setting"}
])
</script>
<style>
</style>

这样就可以快速进行菜单的渲染，而且支持无限级菜单渲染

原文地址：http://www.article.wang/portal/article/5