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