VUE3—无限级菜单渲染

最新推荐文章于 2025-07-10 16:26:03 发布

远方的猫

最新推荐文章于 2025-07-10 16:26:03 发布

阅读量801

点赞数 5

CC 4.0 BY-SA版权

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/huwentao0305/article/details/141003601

场景：

从后台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: