el-menu-item-group 递归菜单

r囧r小猫 2024-03-27 12:01 40阅读 0赞

el-menu-item-group 是 Vue.js 中使用的一种组件，可以用来渲染一组递归菜单。

使用 el-menu-item-group 的方法如下：

1.  在 template 中添加 el-menu-item-group 组件，并为它指定一个标题，比如：

<template>
      <el-menu-item-group title="分类一">
      </el-menu-item-group>
    </template>

1.  在 el-menu-item-group 中添加 el-menu-item 组件，表示菜单项：

<template>
      <el-menu-item-group title="分类一">
        <el-menu-item index="1">菜单一</el-menu-item>
        <el-menu-item index="2">菜单二</el-menu-item>
      </el-menu-item-group>
    </template>

1.  可以在 el-menu-item-group 中再嵌套一个 el-menu-item-group，表示下级菜单：

<template>
      <el-menu-item-group title="分类一">
        <el-menu-item index="1">菜单一</el-menu-item>
        <el-menu-item-group title="子分类一">
          <el-menu-item index="2-1">子菜单一</el-menu-item>
          <el-menu-item index="2-2">子菜单二</el-menu-item>
        </el-menu-item-group>
      </el-menu-item-group>
    </template>

这样，就可以渲染出一个递归菜单了。

注意，如果要使用 el-menu-item-group，需要在组件中引入 Element UI 的菜单组件。具体方法是：

1.  安装 Element UI：

npminstall element-ui

1.  在 main.js 中引入 Element UI 并安装：

\`\`\` import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI

发表评论取消回复

表情：

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

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

相关阅读

相关 Java菜单树递归

主要实现思路 1.首先从菜单数据中获取所有根节点。 2.为根节点建立次级子树并拼接上。 3.递归为子节点建立次级子树并接上，直至为末端节点拼接上空的“树”。数据表设计

迈不过友情╰/ 2023年09月23日 14:23/ 0 赞/ 141 阅读

相关 java 递归菜单树（详细）

1.表结构 SET FOREIGN_KEY_CHECKS=0; -- ---------------------------- -- T

不念不忘少年蓝@/ 2023年06月22日 13:46/ 0 赞/ 239 阅读

相关 Mybatis 递归查询树形菜单

文章目录 1、数据库表结构 2、查询结果展示 3、实体类Depa

雨点打透心脏的1/2处/ 2023年02月17日 11:17/ 0 赞/ 37 阅读

相关 Vant Collapse 移动端递归菜单

// 控制只打开一个 onCollapseOpen(openKeys) { const latestOpenKey = openK

╰半橙微兮°/ 2023年01月15日 08:30/ 0 赞/ 268 阅读

相关 Vue 递归组件(构建树形菜单)

对于一些有规律的DOM结构，如果我们再一遍遍的编写同样的代码，显然代码是比较繁琐和不科学的，而且自己的工作量会大大增加，那么有没有一种方法来解决这个问题呢？答案是肯定的

阳光穿透心脏的1/2处/ 2023年01月02日 06:25/ 0 赞/ 239 阅读

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

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

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

相关 Vue前端树形菜单面包屑递归

Vue前端树形菜单面包屑递归 1.递归菜单 findIndexArray(data, id, indexArray) { let arr =

青旅半醒/ 2022年10月26日 03:54/ 0 赞/ 439 阅读

相关 java递归生成树形结构菜单

一、mysql表，数据自行准备 CREATE TABLE `sys_menu` ( `id` int(11) NOT NULL AUTO_INCREMEN

一时失言乱红尘/ 2022年03月30日 03:27/ 0 赞/ 621 阅读

相关递归遍历多层次菜单

//根据后台数据格式化菜单 function formatMenu(data) { return data.map(function (item

冷不防/ 2021年12月11日 08:57/ 0 赞/ 316 阅读

相关菜单目录结构生成算法(递归)

不多说了,上代码!!!!!!!! package pers.zc.activiti.service.impl; import org.activi

左手的ㄟ右手/ 2021年07月25日 02:37/ 0 赞/ 511 阅读