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;
},
},
};