vue页面递归调用+element ui完成左侧导航

最新推荐文章于 2024-08-11 17:33:21 发布

小蒜瓣

最新推荐文章于 2024-08-11 17:33:21 发布

阅读量2.6k

点赞数

分类专栏： UI 编码

本文链接：https://blog.youkuaiyun.com/messicr7/article/details/100578797

版权

本文介绍如何利用Vue和Element UI组件库，通过递归调用来创建一个动态的左侧导航菜单。首先创建一个递归组件，组件内部通过自我调用来实现递归渲染。然后在实际页面中引入并使用这个组件。数据格式需符合特定结构，最终展示为完整的导航树。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

element ui实现左侧导航的递归渲染

首先写一个递归的组件，递归的方法是在组件里自己调用自己

<template>
    <div>
        <div v-for="(item,index) in menudata" :key='index'>
            <el-submenu :index="index+''" v-if="item.isMenu && item.children && item.children.find((child)=>{return(child.isMenu==true)})">
                <template slot="title">
                    <i :class="item.icon"></i>
                    <span>{
  {item.menuName}}</span>
                </template>
                <left-menu :menudata="item.children"></left-menu>
                
            </el-submenu>
            <el-menu-item :index="item.path" v-else-if="item.isMenu && (!item.children || !item.children.find((child)=>{return(child.isMenu==true)}))