element ui 导航动态三级菜单

最新推荐文章于 2025-03-06 09:38:08 发布

雨文2021

最新推荐文章于 2025-03-06 09:38:08 发布

阅读量2.7k

点赞数 3

文章标签： vue.js elementui javascript

本文链接：https://blog.youkuaiyun.com/qq_28170105/article/details/125980639

版权

本文将展示如何使用 Vue.js 和 Element UI 框架来创建一个动态的三级导航菜单。通过JavaScript处理数据，实现菜单项的动态加载和显示。

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

效果

全部代码

<template>
   <div class="nav">
     <div class="nav-main">
       <div class="logo">
         <img src="http://p0.qhimg.com/t01fe635ab3e1451786.png" style="width: 65%;"/>
       </div>
      <div class="menu-main" style="min-width: 900px">
      <el-menu
         :default-active="activeIndex2"
         class="el-menu-demo"
         mode="horizontal"
         @select="handleSelect"
         text-color="#606166"
         active-text-color="#02a388">
         <!-- 一级菜单 -->
       <template v-for="item in list">
         <el-submenu v-if="item.children && item.children.length" :index="item.path" :key="item.path">
           <template slot="title"><span>{
  {item.name}}</span></template>
           <!-- 二级菜单 -->
           <template v-for="itemChild in item.children">
             <el-submenu v-if="itemChild.children && itemChild.children.length" :index="itemChild.path" :key="itemChild.path">
                 <template slot="title"><span>{
  {itemChild.name}}</span></template>

                 <!-- 三级菜单 -->
                 <el-menu-item v-for="itemChild_Child in itemChild.children" :index="itemChild_Child .path" :key="itemChild_Child.path">
                    <span slot="title">{
  {itemChild_Child.name}}</span>
                 </el-menu-item>
             </el-submenu&

最低0.47元/天解锁文章