vue+elemenUi+menu实现树形导航栏递归组件目录菜单menuforEachMathfloorrandom
Posted web半晨
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue+elemenUi+menu实现树形导航栏递归组件目录菜单menuforEachMathfloorrandom相关的知识，希望对你有一定的参考价值。
目录
1、创建组件
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 "@/view/npmPackage/components/mj-menu";
export default
name: "mjMenu",
components: mjMenu ,
props:
mjMenuTree:
type: Array,
default: () =>
return [
id: "1",
label: "一级 1",
children: [
id: "2",
label: "二级 1-1",
children: [
id: "3",
label: "三级 1-1-1",
,
],
,
],
,
id: "4",
label: "一级 2",
children: [
id: "5",
label: "二级 2-1",
children: [
id: "6",
label: "三级 2-1-1",
,
],
,
id: "7",
label: "二级 2-2",
children: [
id: "8",
label: "三级 2-2-1",
,
],
,
],
,
id: "9",
label: "一级 3",
children: [
id: "10",
label: "二级 3-1",
children: [
id: "11",
label: "三级 3-1-1",
,
],
,
id: "12",
label: "二级 3-2",
children: [
id: "13",
label: "三级 3-2-1",
,
],
,
],
,
];
,
,
,
data()
return ;
,
;
2、使用组件
html
<div>
<el-menu>
<mj-menu :mjMenuTree="menuTree"></mj-menu>
</el-menu>
</div>
JavaScript
import mjMenu from "@/view/npmPackage/components/mj-menu";
export default
name: "mjMenuPackage",
components: mjMenu ,
data()
return
menuTree: [],
menuTrees: [
id: "1",
label: "一级 1",
children: [
id: "2",
label: "二级 1-1",
children: [
id: "3",
label: "三级 1-1-1",
,
],
,
],
,
id: "4",
label: "一级 2",
children: [
id: "5",
label: "二级 2-1",
children: [
id: "6",
label: "三级 2-1-1",
,
],
,
id: "7",
label: "二级 2-2",
children: [
id: "8",
label: "三级 2-2-1",
,
],
,
],
,
id: "9",
label: "一级 3",
children: [
id: "10",
label: "二级 3-1",
children: [
id: "11",
label: "三级 3-1-1",
,
],
,
id: "12",
label: "二级 3-2",
children: [
id: "13",
label: "三级 3-2-1",
,
],
,
],
,
],
;
,
created()
this.menuTree = this.handleMenuTree(this.menuTrees);
,
methods:
// 添加随机icon
handleMenuTree(menuTrees)
let icon = [
"el-icon-setting",
"el-icon-user",
"el-icon-star-off",
"el-icon-warning-outline",
"el-icon-upload",
"el-icon-s-order",
"el-icon-c-scale-to-original",
"el-icon-coin",
"el-icon-receiving",
"el-icon-cpu",
"el-icon-sugar",
"el-icon-ice-cream-square",
"el-icon-milk-tea",
"el-icon-watch",
"el-icon-mobile",
"el-icon-tickets",
];
menuTrees.forEach((item) =>
let indexRandom = Math.floor(Math.random() * (15 - 0 + 1)) + 0;
item.icon = icon[indexRandom];
if (item.children) this.handleMenuTree(item.children);
);
return menuTrees;
,
,
;
以上是关于vue+elemenUi+menu实现树形导航栏递归组件目录菜单menuforEachMathfloorrandom的主要内容，如果未能解决你的问题，请参考以下文章