vue+elemenUi+menu实现树形导航栏递归组件目录菜单menuforEachMathfloorrandom

Posted 2022-12-09 牧码厂

目录

• 1、下载安装指令
• 2、关键源码
• 3、递归组件打包逻辑

---

1、下载安装指令

npm install mj-menu --save-dev

下载后文件包有使用说明

---

2、关键源码

html

<template>
  <div>
    <label v-for="item in mjMenuTree" :key="item.id">
      <el-submenu :index="item.id" v-if="item.children">
        <template slot="title">
          <i :class="item.icon || 'el-icon-setting'"></i>
          <span> item.label </span>
        </template>

        <label>
          <mj-menu :mjMenuTree="item.children"></mj-menu>
        </label>
      </el-submenu>

      <el-menu-item v-else :index="item.id">
        <template slot="title">
          <i :class="item.icon || 'el-icon-setting'"></i>
          <span> item.label </span>
        </template>
      </el-menu-item>
    </label>
  </div>
</template>

---

JavaScript

import mjMenu from "./recursiveComponent.vue";

export default 
	name: "mjMenu",
	components:  mjMenu ,
	props: ["mjMenuTree"],
;

---

3、递归组件打包逻辑

首先建一个文件夹叫mjMenu，文件夹里面分辨创建index.vue和recursiveComponent.vue。index.vue的作用是引用递归组件，recursiveComponent.vue就是递归组件了；在同一个文件夹里引用自己，同时有个出口，这样打包就不会有问题啦！