vue2 elementUI递归渲染多级菜单栏

已于 2023-08-09 09:21:14 修改
阅读量1.7k 收藏 5
点赞数 2
分类专栏： 前端相关的配套使用 文章标签： NavMenu 多级菜单 递归菜单
于 2021-04-26 09:59:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42618566/article/details/116143899
版权

需要将组件拆分为两个：菜单栏容器一个，菜单栏列表一个

在这里插入图片描述

  1. 菜单栏列表：list.vue
    此处的fragment 是安装的插件：npm install vue-fragment --save，为了解决菜单栏折叠文字和>不隐藏。
<template>
  <fragment class="menu-list">
    <template v-for="item in data">
      <el-menu-item
        v-if="!item.children"
        :key="item.menuIdStr"
        :index="item.menuIdStr"
        @click="goPage(item)"
      >
        <i :class="item.icon"></i>
        <span slot="title">{{ item.menuName }}</span>
      </el-menu-item>
      <el-submenu v-else :key="item.menuIdStr" :index="item.menuIdStr">
        <template slot="title">
          <i :class="item.icon"></i>
          <span slot="title">{{ item.menuName }}</span>
        </template>
        <MenuList :data="item.children"></MenuList>
      </el-submenu>
    </template>
  </fragment>
</template>

<script>
/**
 * @author        全易
 * @time          2021-04-26 08:48:57  星期一
 * @description   菜单栏列表
 */
import Fragment from 'vue-fragment'
Vue.use(Fragment.Plugin)


export default {
  name: "MenuList",
  props: {
    data: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  methods: {
    // 跳转页面
    goPage(page) {
      // console.log(page);
      if (this.$route.path !== page.path) {
        this.$router.push(page.path);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.fa {
  vertical-align: middle;
  margin-right: 5px;
  width: 24px;
  text-align: center;
}
</style>
  1. 菜单栏容器：index.vue
<template>
  <el-menu
    class="box-card"
    unique-opened
    :collapse="$store.state.isCollapse"
    :default-active="$store.state.defaultPage"
    background-color="#2f3332"
    text-color="#fff"
    active-text-color="#ff9c40"
    :style="$store.state.width"
  >
    <el-menu-item index="Page-Home" @click="goPage({ url: '/home' })">
      <i class="fa fa-newspaper-o"></i>
      <span slot="title">看盘</span>
    </el-menu-item>
    <!-- <MenuList :data="$store.state.permissionMenu"></MenuList> -->
    <MenuList :data="menus"></MenuList>
  </el-menu>
</template>

<script>
/**
 * @author        全易
 * @time          2020-10-05 16:38:30  星期一
 * @description   菜单栏
 */
import MenuList from "./list";

export default {
  name: "Menu",
  components: {
    MenuList,
  },
  data() {
    return {
      menus: [
        {
          menuName: "设备管理",
          menuIdStr: "equipment/index",
          icon: "fa fa-tasks",
          path: "/equipment/index",
        },
        {
          menuName: "运行管理",
          menuIdStr: "running/index",
          icon: "fa fa-tasks",
          path: "/running/index",
        },
        {
          menuName: "档案管理",
          menuIdStr: "3",
          icon: "fa fa-address-card-o",
          children: [
            {
              menuName: "用户管理",
              menuIdStr: "archives/user",
              icon: "el-icon-user",
              path: "/archives/user",
            },
            {
              menuName: "客户管理",
              menuIdStr: "archives/client",
              icon: "fa fa-handshake-o",
              path: "/archives/client",
            },
            {
              menuName: "计量点管理",
              menuIdStr: "archives/jldAdmin",
              icon: "fa fa-dot-circle-o",
              path: "/archives/jldAdmin",
            },
            {
              menuName: "计量关系管理",
              menuIdStr: "archives/jldgx-manage",
              icon: "fa fa-circle-o-notch",
              path: "/archives/jldgx-manage",
            },
            {
              menuName: "运行电能表管理",
              menuIdStr: "archives/yxdnbAdmin",
              icon: "fa fa-podcast",
              path: "/archives/yxdnbAdmin",
            },
            {
              menuName: "运行互感器管理",
              menuIdStr: "archives/yxhgqAdmin",
              icon: "fa fa-american-sign-language-interpreting",
              path: "/archives/yxhgqAdmin",
            },
            {
              menuName: "供电电源管理",
              menuIdStr: "archives/gddyAdmin",
              icon: "fa fa-bolt",
              path: "/archives/gddyAdmin",
            },
          ],
        },
        {
          menuName: "抄表管理",
          menuIdStr: "6",
          icon: "el-icon-edit-outline",
          children: [
            {
              menuName: "采集管理",
              menuIdStr: "6-1",
              icon: "",
              children: [
                {
                  menuName: "采集终端管理",
                  menuIdStr: "6-1-1",
                  icon: "",
                  path: "/test",
                },
                {
                  menuName: "终端远程调试",
                  menuIdStr: "6-1-2",
                  icon: "",
                  path: "/test",
                },
                {
                  menuName: "采集队列管理",
                  menuIdStr: "6-1-3",
                  icon: "",
                  path: "/test",
                },
                {
                  menuName: "采集任务编制",
                  menuIdStr: "6-1-4",
                  icon: "",
                  path: "/test",
                },
              ],
            },
            {
              menuName: "抄表管理",
              menuIdStr: "6-2",
              icon: "",
              children: [
                {
                  menuName: "抄表段管理",
                  menuIdStr: "meterReading/cbdAdmin",
                  icon: "",
                  path: "/meterReading/cbdAdmin",
                },
                {
                  menuName: "区段用户管理",
                  menuIdStr: "6-2-2",
                  icon: "",
                  path: "/test",
                },
                {
                  menuName: "示数录入管理",
                  menuIdStr: "6-2-4",
                  icon: "",
                  path: "/test",
                },
                {
                  menuName: "抄表补抄管理",
                  menuIdStr: "6-2-5",
                  icon: "",
                  path: "/test",
                },
                {
                  menuName: "临时抄表管理",
                  menuIdStr: "6-2-6",
                  icon: "",
                  path: "/test",
                },
              ],
            },
            {
              menuName: "抄表计划",
              menuIdStr: "6-2-3",
              icon: "",
              path: "meterReading/cbjhAdmin",
            },
            {
              menuName: "抄表稽核",
              menuIdStr: "6-3",
              icon: "",
              children: [
                {
                  menuName: "稽核策略",
                  menuIdStr: "6-3-1",
                  icon: "",
                  path: "/test",
                },
                {
                  menuName: "稽核设置",
                  menuIdStr: "6-3-2",
                  icon: "",
                  path: "/test",
                },
                {
                  menuName: "示数稽核",
                  menuIdStr: "6-3-3",
                  icon: "",
                  path: "/test",
                },
              ],
            },
            {
              menuName: "费制管理",
              menuIdStr: "6-4",
              icon: "",
              children: [
                {
                  menuName: "控制设置",
                  menuIdStr: "6-4-1",
                  icon: "",
                  path: "/test",
                },
                {
                  menuName: "执行记录",
                  menuIdStr: "6-4-2",
                  icon: "",
                  path: "/test",
                },
                {
                  menuName: "控制查询",
                  menuIdStr: "6-4-3",
                  icon: "",
                  path: "/test",
                },
              ],
            },
          ],
        },
        {
          menuName: "价格管理",
          menuIdStr: "7",
          icon: "fa fa-jpy",
          children: [
            {
              menuName: "价格综合管理",
              menuIdStr: "prices/all-manage",
              icon: "",
              path: "/prices/all-manage",
            },
            {
              menuName: "计算版本设置",
              menuIdStr: "prices/jsbbAdmin",
              icon: "",
              path: "/prices/jsbbAdmin",
            },
            {
              menuName: "目录电价设置",
              menuIdStr: "7-3",
              icon: "",
              children: [
                {
                  menuName: "目录电价管理",
                  menuIdStr: "prices/mldjAdmin",
                  icon: "",
                  path: "/prices/mldjAdmin",
                },
                {
                  menuName: "目录电价明细管理",
                  menuIdStr: "prices/mldjmxAdmin",
                  icon: "",
                  path: "/prices/mldjmxAdmin",
                },
              ],
            },
            {
              menuName: "代征电价设置",
              menuIdStr: "7-4",
              icon: "",
              children: [
                {
                  menuName: "代征项目管理",
                  menuIdStr: "prices/dzxmAdmin",
                  icon: "",
                  path: "/prices/dzxmAdmin",
                },
                {
                  menuName: "代征加价管理",
                  menuIdStr: "prices/dzjjAdmin",
                  icon: "",
                  path: "/prices/dzjjAdmin",
                },
                {
                  menuName: "代征电价管理",
                  menuIdStr: "prices/dzdjAdmin",
                  icon: "",
                  path: "/prices/dzdjAdmin",
                },
              ],
            },
            {
              menuName: "标准参数设置",
              menuIdStr: "7-5",
              icon: "",
              children: [
                {
                  menuName: "功率因数标准表",
                  menuIdStr: "prices/glysbzbAdmin",
                  icon: "",
                  path: "/prices/glysbzbAdmin",
                },
                {
                  menuName: "变损参数标准表",
                  menuIdStr: "prices/bscsbzbAdmin",
                  icon: "",
                  path: "/prices/bscsbzbAdmin",
                },
                {
                  menuName: "变损电量标准表",
                  menuIdStr: "prices/bsdlbzbAdmin",
                  icon: "",
                  path: "/prices/bsdlbzbAdmin",
                },
              ],
            },
            {
              menuName: "基本电价设置",
              menuIdStr: "prices/jbdjAdmin",
              icon: "",
              path: "/prices/jbdjAdmin",
            },
            {
              menuName: "执行范围设置",
              menuIdStr: "prices/zxfwAdmin",
              icon: "",
              path: "/prices/zxfwAdmin",
            },
          ],
        },
        {
          menuName: "算费管理",
          menuIdStr: "8",
          icon: "el-icon-money",
          children: [
            {
              menuName: "算费设置",
              menuIdStr: "8-1",
              icon: "",
              children: [
                {
                  menuName: "算费项目",
                  menuIdStr: "8-1-1",
                  icon: "",
                  path: "/test",
                },
                {
                  menuName: "算费策略",
                  menuIdStr: "8-1-2",
                  icon: "",
                  path: "/test",
                },
                {
                  menuName: "策略配置",
                  menuIdStr: "8-1-3",
                  icon: "",
                  path: "/test",
                },
              ],
            },
            {
              menuName: "电费计算",
              menuIdStr: "8-2",
              icon: "",
              children: [
                {
                  menuName: "单户算费",
                  menuIdStr: "8-2-1",
                  icon: "",
                  path: "/test",
                },
                {
                  menuName: "批量算费",
                  menuIdStr: "8-2-2",
                  icon: "",
                  path: "/test",
                },
              ],
            },
            {
              menuName: "审核发行",
              menuIdStr: "8-3",
              icon: "",
              children: [
                {
                  menuName: "审核设置",
                  menuIdStr: "8-3-1",
                  icon: "",
                  path: "/test",
                },
                {
                  menuName: "电费审核",
                  menuIdStr: "8-3-2",
                  icon: "",
                  path: "/test",
                },
                {
                  menuName: "电费查询",
                  menuIdStr: "8-3-3",
                  icon: "",
                  path: "/test",
                },
                {
                  menuName: "异常查询",
                  menuIdStr: "8-3-4",
                  icon: "",
                  path: "/test",
                },
                {
                  menuName: "电费发行",
                  menuIdStr: "8-3-5",
                  icon: "",
                  path: "/test",
                },
                {
                  menuName: "反向发行",
                  menuIdStr: "8-3-6",
                  icon: "",
                  path: "/test",
                },
              ],
            },
          ],
        },
        {
          menuName: "收费管理",
          menuIdStr: "9",
          icon: "fa fa-money",
          children: [
            {
              menuName: "发票管理",
              menuIdStr: "9-1",
              icon: "",
              children: [
                {
                  menuName: "发票管理",
                  menuIdStr: "9-1-1",
                  icon: "",
                  path: "/test",
                },
                {
                  menuName: "发票审核",
                  menuIdStr: "9-1-2",
                  icon: "",
                  path: "/test",
                },
              ],
            },
            {
              menuName: "坐收管理",
              menuIdStr: "9-2",
              icon: "",
              children: [
                {
                  menuName: "前台坐收",
                  menuIdStr: "9-2-1",
                  icon: "",
                  path: "/test",
                },
                {
                  menuName: "收费查询",
                  menuIdStr: "9-2-2",
                  icon: "",
                  path: "/test",
                },
                {
                  menuName: "收费冲单",
                  menuIdStr: "9-2-3",
                  icon: "",
                  path: "/test",
                },
                {
                  menuName: "收费对账",
                  menuIdStr: "9-2-4",
                  icon: "",
                  path: "/test",
                },
              ],
            },
            {
              menuName: "充值缴费",
              menuIdStr: "9-3",
              icon: "",
              children: [
                {
                  menuName: "用户充值",
                  menuIdStr: "9-3-1",
                  icon: "",
                  path: "/test",
                },
                {
                  menuName: "用户缴费",
                  menuIdStr: "9-3-2",
                  icon: "",
                  path: "/test",
                },
                {
                  menuName: "用户冲单",
                  menuIdStr: "9-3-3",
                  icon: "",
                  path: "/test",
                },
                {
                  menuName: "缴费记录",
                  menuIdStr: "9-3-4",
                  icon: "",
                  path: "/test",
                },
              ],
            },
            {
              menuName: "违约金管理",
              menuIdStr: "9-4",
              icon: "",
              children: [
                {
                  menuName: "计算配置",
                  menuIdStr: "9-4-1",
                  icon: "",
                  path: "/test",
                },
                {
                  menuName: "违约金计算",
                  menuIdStr: "9-4-2",
                  icon: "",
                  path: "/test",
                },
                {
                  menuName: "违约金减免",
                  menuIdStr: "9-4-3",
                  icon: "",
                  path: "/test",
                },
              ],
            },
            {
              menuName: "预存扣款",
              menuIdStr: "9-5",
              icon: "",
              children: [
                {
                  menuName: "余额统计",
                  menuIdStr: "9-5-1",
                  icon: "",
                  path: "/test",
                },
                {
                  menuName: "预存扣款",
                  menuIdStr: "9-5-2",
                  icon: "",
                  path: "/test",
                },
              ],
            },
            {
              menuName: "收费统计",
              menuIdStr: "9-6",
              icon: "",
              children: [
                {
                  menuName: "收费日报",
                  menuIdStr: "9-6-1",
                  icon: "",
                  path: "/test",
                },
                {
                  menuName: "流水查询",
                  menuIdStr: "9-6-2",
                  icon: "",
                  path: "/test",
                },
                {
                  menuName: "用户查询",
                  menuIdStr: "9-6-4",
                  icon: "",
                  path: "/test",
                },
                {
                  menuName: "余额查询",
                  menuIdStr: "9-6-5",
                  icon: "",
                  path: "/test",
                },
                {
                  menuName: "缴费记录",
                  menuIdStr: "9-6-6",
                  icon: "",
                  path: "/test",
                },
              ],
            },
          ],
        },
        {
          menuName: "账务管理",
          menuIdStr: "10",
          icon: "el-icon-notebook-1",
          children: [
            {
              menuName: "实收管理",
              menuIdStr: "10-1",
              icon: "",
              children: [
                {
                  menuName: "实收查询",
                  menuIdStr: "10-1-1",
                  icon: "",
                  path: "/test",
                },
                {
                  menuName: "实收日报",
                  menuIdStr: "10-1-2",
                  icon: "",
                  path: "/test",
                },
                {
                  menuName: "实收月报",
                  menuIdStr: "10-1-3",
                  icon: "",
                  path: "/test",
                },
              ],
            },
            {
              menuName: "应收管理",
              menuIdStr: "10-2",
              icon: "",
              children: [
                {
                  menuName: "应收查询",
                  menuIdStr: "10-2-1",
                  icon: "",
                  path: "/test",
                },
                {
                  menuName: "应收审核",
                  menuIdStr: "10-3-2",
                  icon: "",
                  path: "/test",
                },
                {
                  menuName: "应收月报",
                  menuIdStr: "10-2-3",
                  icon: "",
                  path: "/test",
                },
              ],
            },
            {
              menuName: "欠费管理",
              menuIdStr: "10-3",
              icon: "",
              children: [
                {
                  menuName: "欠费查询",
                  menuIdStr: "10-3-1",
                  icon: "",
                  path: "/test",
                },
                {
                  menuName: "欠费统计",
                  menuIdStr: "10-3-2",
                  icon: "",
                  path: "/test",
                },
                {
                  menuName: "欠费催缴",
                  menuIdStr: "10-3-3",
                  icon: "",
                  path: "/test",
                },
              ],
            },
            {
              menuName: "报表管理",
              menuIdStr: "10-4",
              icon: "",
              children: [
                {
                  menuName: "预存日报",
                  menuIdStr: "10-4-1",
                  icon: "",
                  path: "/test",
                },
                {
                  menuName: "欠费日报",
                  menuIdStr: "10-4-2",
                  icon: "",
                  path: "/test",
                },
                {
                  menuName: "追收日报",
                  menuIdStr: "10-4-3",
                  icon: "",
                  path: "/test",
                },
                {
                  menuName: "综合月报",
                  menuIdStr: "10-4-4",
                  icon: "",
                  path: "/test",
                },
              ],
            },
          ],
        },
        {
          menuName: "系统管理",
          menuIdStr: "11",
          icon: "fa fa-cogs",
          children: [
            {
              menuName: "参数设置",
              menuIdStr: "11-1",
              icon: "fa fa-sliders",
              path: "/test",
            },
            {
              menuName: "角色管理",
              menuIdStr: "system/jsglAdmin",
              icon: "fa fa-pencil",
              path: "/system/jsglAdmin",
            },
            {
              menuName: "机构管理",
              menuIdStr: "system/jgglAdmin",
              icon: "fa fa-building-o",
              path: "/system/jgglAdmin",
            },
            {
              menuName: "资源管理",
              menuIdStr: "11-4",
              icon: "fa fa-suitcase",
              path: "/test",
            },
            {
              menuName: "日志查询",
              menuIdStr: "system/rzcxAdmin",
              icon: "fa fa-file-text-o",
              path: "/system/rzcxAdmin",
            },
          ],
        },
      ],
    };
  },
  methods: {
    // 跳转页面
    goPage(page) {
      // console.log(page);
      if (this.$route.path !== page.url) {
        this.$router.push(page.url);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.no-menus {
  color: #ffffff;
  padding: 15px;
}
.fa {
  vertical-align: middle;
  margin-right: 5px;
  width: 24px;
  text-align: center;
}
.box-card {
  border: none;
  height: 100vh;
  overflow: auto;
  .menu {
    height: calc(100vh - 175px);
    overflow: auto;
  }
  .often {
    z-index: 1;
    position: sticky;
    top: 0;
    color: #ffffff;
    padding: 10px 0;
    border-bottom: 1px solid #6b6b6b;
    background-color: #2f3332;
    .title {
      margin-bottom: 8px;
      padding-left: 8px;
    }
    .item {
      height: 28px;
      line-height: 28px;
      font-size: 12px;
    }
  }
}
</style>

两个组件都封装好了就只调用菜单栏容器
在这里插入图片描述

美酒没故事°
关注
专栏目录
Vue中ElementUI多级导航菜单动态加载——递归
_
03-29 9097
在前后端分离项目中，前端要实现根据后端传来的json格式数据，进行多级导航菜单的动态加载，层级数目较小或者各个层级的数目固定情况下，可以编辑固定数目的父子导航组件，与后端数据对应方可。但是，后期需要调整菜单父子关系或者说动态增删菜单，会导致菜单数据层级关系不确定，比如说某一个层级菜单有2个子菜单，而与之同级的菜单有非2个子菜单，这就不能按照之前固定格式的代码进行渲染了，可以借助递归思想，将动态加载...
Vue2和ElementUI编写的无限级菜单路由
weixin_44846436的博客
04-24 549
在这个例子中，我们使用了el-menu和el-submenu组件来实现无限级菜单。menuList数组中存储了菜单的数据，包括菜单的名称、路径和图标等信息。如果一个菜单有子菜单，我们使用el-submenu组件来展示它的子菜单，否则使用el-menu-item组件来展示它本身。在实际项目中，我们可以将菜单数据存储在后端数据库中，通过API来获取菜单数据，并动态生成菜单。这样可以更加灵活地管理菜单，同时也方便后续的维护和扩展。文章转载自：www.javaman.cn。
springboot + vue 实现递归生成多级菜单(实例代码)
08-25
主要介绍了springboot + vue 实现递归生成多级菜单，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
VUE3—无限级菜单渲染
最新发布
远方的猫的博客
08-07 511
从后台查询的菜单数据，如何简洁的渲染到界面上？
基于Vue+elementUI menu组件的动态渲染多级目录
qq_41720628的博客
10-09 875
后端接口是，通过父级目录id查询子级目录列表，所以我需要动态渲染一个多级目录，目录深度不确定。我使用了elementUi的menu组件，因为项目是基于Vue2 的所有 是用的。其实可以不使用这样的方式存储menu的路径，elementUI官方提供相应的方法。方式是因为menu组件抽风了，就是没有存储到路径。函数，我把目录的路径存储在menu的index属性里面。第一层第一个-->第二层的第三个-->第三层的第三个。下图是作者的实际项目的代码，仅供参考。父组件script部分，仅供参考。
vue使用element-ui创建多级菜单
qq_59599812的博客
09-18 798
1.代码是从项目直接搬下来的，其中的一些方法，你们可能用不到，一个。很简单，:data='dat'为总数据，每个。是用来判断每级创建不同的button按钮。第四个el-table-column。
vue2 ＋ el-menu三级列表无限渲染（递归）
weixin_54397440的博客
11-16 645
【代码】vue2 ＋ el-menu三级列表无限渲染（递归）
分享一个VUE Element-UI 的多级菜单动态渲染的组件
热门推荐
王世春的博客
12-23 5万+
以下是组件代码：&lt;template&gt; &lt;div class="navMenu"&gt; &lt;label v-for="navMenu in navMenus"&gt; &lt;el-menu-item v-if="navMenu.childs==null&amp;&amp;navMenu.entity&amp;&amp;na
详解VUE Element-UI多级菜单动态渲染的组件
10-17
在文中的示例代码中，定义了一个名为NavMenu的Vue组件，这个组件负责渲染多级菜单。它接收一个名为navMenus的prop，该prop是一个菜单对象数组，数组中的每个对象代表一个菜单项。通过递归的方式，组件可以处理任意...
Vue结合路由配置递归实现菜单栏功能
10-15
以上代码实现了递归渲染菜单栏的基本结构。在实际项目中，我们可能还需要考虑以下几点： 1. **权限控制**：菜单项应根据用户角色和权限动态生成，可以通过鉴权服务获取可访问的菜单列表。 2. **动态加载**：一级...
Vue 递归多级菜单的实例代码
10-17
总结来说，Vue递归多级菜单的实现需要理解以下知识点： - Vue组件的创建和使用，包括组件的数据、方法、属性的定义。 - v-for和v-if指令的运用，用于遍历数据和根据条件渲染元素。 - slot插槽的使用，它允许组件的...
vue实现多级菜单效果
10-16
主要为大家详细介绍了vue实现多级菜单效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue侧边栏递归渲染
weixin_58889599的博客
12-07 1084
vue侧边栏无限级菜单
vue data 值如何渲染_vue项目多级菜单，如何渲染
weixin_39674293的博客
12-01 287
1、当不确定菜单有多少层级的时候，第一时间就想到使用递归的方式渲染菜单，下面我们来看看如何实现。菜单图例2、使用ivew菜单组件，目前项目也用的是这个框架，不熟悉的小伙伴可以先看看这个菜单组件，熟悉的小伙伴我们继续向下看。3、我的实现思路，判断没有子菜单单的时候，使用组件的正常渲染，如果有子菜单，那就需要加载这个组件 <left-menu-nav />，继续帮我们循环，走下一步 &...
vue项目多级菜单，如何渲染
qq_36380562的博客
07-16 1125
1、当不确定菜单有多少层级的时候，第一时间就想到使用递归的方式渲染菜单，下面我们来看看如何实现。（使用技术：vue+iview） 2、使用ivew菜单组件，目前项目也用的是这个框架，不熟悉的小伙伴可以先看看这个菜单组件，熟悉的小伙伴我们继续向下看。 3、我的实现思路，判断没有子菜单单的时候，使用组件的正常渲染，如果有子菜单，那就需要加载这个组件 ，继续帮我们循环，走下一步 <Menu ref="user" accordion width="a
vue多级菜单的实现
王小二的博客
01-25 1万+
本次记录基于iview3框架实现多级菜单+vue router实现页面切换 方法一： 使用Tree 树形控件，官方文档https://www.iviewui.com/components/tree 以官方demo为例，数据中添加URL属性，用于路由跳转，正式项目中该tree控件的数据由后端给出，需要注意的是后端给出的URL跳转地址最前一定要看清有没有"/" ，如果没有自己手动加或后端改，没有...
Vue3 + Element Plus 多级嵌套菜单动态渲染
Yana's Blog
08-30 3091
动态渲染多级嵌套菜单点击菜单跳转页面子菜单高亮，对应父级菜单也高亮不同路由高亮同一菜单。
vue三级菜单渲染_vue实现多级菜单效果
weixin_39805195的博客
12-24 2263
本次记录基于iview3框架实现多级菜单+vue router实现页面切换方法一：使用Tree 树形控件，官方文档以官方demo为例，数据中添加URL属性，用于路由跳转，正式项目中该tree控件的数据由后端给出，需要注意的是后端给出的URL跳转地址最前一定要看清有没有"/"，如果没有自己手动加或后端改，没有这个"/" 斜杠会导致路由跳转失败。思路：根据官方文档里面写用on-select-chang...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

美酒没故事°

谢谢看官

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值