el-menu实现多级菜单效果

以你之姓@ 2022-12-01 01:15 490阅读 0赞

如何用element-ui的el-menu组件动态实现多级菜单？

**1）创建menuTree.vue组件**

<template>
      <div class="gtd-menu-tree">
        <template v-for="(item, index) in data">
          <el-submenu :key="index" v-if="item.children && item.children.length>0" :index="item.title">
            <template slot="title">
              <span class="menu-text">{
       { item.title }}</span>
            </template>
            <Menu :data="item.children" />
          </el-submenu>
          <el-menu-item :key="index" :index="item.path" :disabled="!item.path" v-else>
            <span slot="title" @click="onSelect(item)" class="menu-text">{
       { item.title }}</span>
          </el-menu-item>
        </template>
      </div>
    </template>
    
    <script> export default { name: "Menu", props: { data: { type: Array, required: true, default: function () { return []; }, }, }, methods: { onSelect(item) { if (this.$route.path && this.$route.path != item.path) { this.$router.push({ path: item.path }); } }, }, }; </script>

**2）vue文件中引入menuTree组件**

<el-menu class="gtd-menu" mode="horizontal" router :default-active="$route.path">
    	
      <Menu :data="menuData" />
    </el-menu>
    
    <script> import Menu from './components/menuTree.vue' export default { data() { return { menuData: [ { title: '一级菜单1', path: 'https://blog.csdn.net/yihanzhi' }, { title: '一级菜单2', path: 'https://blog.csdn.net/yihanzhi/article/details/108074292' } ] } }, components: { Menu }, } </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，490人围观）

还没有评论，来说两句吧...

相关阅读

相关多级菜单实现难题：Java递归实现多级菜单实例

在Java中，实现多级菜单通常会涉及到递归。以下是一个简单的例子，展示如何使用递归来创建多级菜单： ```java // 定义菜单项类 class MenuItem {

痛定思痛。/ 2024年09月17日 17:21/ 0 赞/ 53 阅读

相关 Java实现多级菜单(递归实现)

Java实现多级菜单菜单管理数据库设计 pgsql表 CREATE TABLE "ads"."sys_menu_permission" ( "m

港控/mmm°/ 2022年12月22日 08:47/ 0 赞/ 515 阅读

相关 el-menu实现多级菜单效果

如何用element-ui的el-menu组件动态实现多级菜单？ 1）创建menuTree.vue组件  <templ

以你之姓@/ 2022年12月01日 01:15/ 0 赞/ 491 阅读

相关 Android---多级树形菜单的实现

本文来自 [http://blog.csdn.net/hellogv/][http_blog.csdn.net_hellogv] ，引用必须注明出处！在An

叁歲伎倆/ 2022年08月21日 09:57/ 0 赞/ 263 阅读

相关 Ajax实现多级联动菜单

最近在重温Ajax技术，就顺手拿起了当年的《Ajax经典案例开发大全》来温习。发现里面有些错误，现在就指出来，这样可以帮助后学者少走弯路。主要的技术有：MyS

刺骨的言语ヽ痛彻心扉/ 2022年06月14日 11:25/ 0 赞/ 272 阅读

相关 jquery 实现多级下拉菜单

$(document).ready(function() \{ function megaHoverOver()\{ $(this).find(".sub"

梦里梦外;/ 2022年06月14日 08:52/ 0 赞/ 506 阅读

相关 JS--jQuery实现的多级下拉菜单效果代码

这篇文章主要介绍了jQuery实现的多级下拉菜单效果代码,涉及jquery鼠标事件及页面元素的显示与隐藏效果实现技巧,非常具有实用价值,需要的朋友可以参考下: 本文实例讲述

冷不防/ 2022年05月13日 18:17/ 0 赞/ 274 阅读

相关实现小菜单效果

![70][] 实现类似上图所示的小菜单：微信小程序wxml页面(如果是html之类的可以用div代替view)：  <view

缺乏、安全感/ 2022年05月08日 09:48/ 0 赞/ 497 阅读

相关 JS案例：简单的多级菜单实现

代码附上： <!DOCTYPE html> <html lang="en"> <head> <meta charset=

骑猪看日落/ 2022年03月15日 03:20/ 0 赞/ 178 阅读

相关注册表添加多级菜单

案例：添加.EXE文件右键菜单父菜单项【DC编程助手】，子菜单项【PEiD】【OllyDbg】 ![291729147053477.png][] Windows Regis

桃扇骨/ 2021年12月21日 00:59/ 0 赞/ 324 阅读