element递归渲染menu组件模板(vue3+js)

71 阅读 0 评论 47 点赞

我是靠谱客的博主闪闪蚂蚁，最近开发中收集的这篇文章主要介绍element递归渲染menu组件模板(vue3+js)，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1、父siderbar

<template>
<div class="sidebar">
<el-menu class="sidebar-el-menu" :default-active="onRoutes" :collapse="sidebar.collapse" background-color="#324157"
text-color="#bfcbd9" active-text-color="#20a0ff" unique-opened router>
<template v-for="item in items">
<template v-if="item.subs">
<SidebarItemVue :subItem="item" :key="item.index"/>
</template>
<template v-else>
<el-menu-item :index="item.index" :key="item.index">
<i :class="item.icon"></i>
<template #title>{{ item.title }}</template>
</el-menu-item>
</template>
</template>
</el-menu>
</div>
</template>
<script>
import { computed } from "vue";
import { useSidebarStore } from '../store/sidebar'
import { useRoute } from "vue-router";
import SidebarItemVue from "./SidebarItem.vue";
export default {
setup() {
const items = [
{
icon: "el-icon-lx-home",
index: "/dashboard",
title: "系统首页",
},
{
icon: "el-icon-lx-cascades",
index: "/table",
title: "基础表格",
},
{
icon: "el-icon-lx-copy",
index: "/tabs",
title: "tab选项卡",
},
{
icon: "el-icon-lx-calendar",
index: "3",
title: "表单相关",
subs: [
{
index: "/form",
title: "基本表单",
},
{
index: "/upload",
title: "文件上传",
},
{
index: "4",
title: "三级菜单",
subs: [
{
index: "/editor",
title: "富文本编辑器",
},
{
index: "/markdown",
title: "markdown编辑器",
},
],
},
],
},
{
icon: "el-icon-lx-emoji",
index: "/icon",
title: "自定义图标",
},
{
icon: "el-icon-pie-chart",
index: "/charts",
title: "schart图表",
},
{
icon: "el-icon-lx-global",
index: "/i18n",
title: "国际化功能",
},
{
icon: "el-icon-lx-warn",
index: "7",
title: "错误处理",
subs: [
{
index: "/permission",
title: "权限测试",
},
{
index: "/404",
title: "404页面",
},
],
},
{
icon: "el-icon-lx-redpacket_fill",
index: "/donate",
title: "支持作者",
},
];
const route = useRoute();
const onRoutes = computed(() => {
return route.path;
});
const sidebar = useSidebarStore();
return {
items,
onRoutes,
sidebar,
};
},
components:{
SidebarItemVue
}
};
</script>
<style scoped>
.sidebar {
display: block;
position: absolute;
left: 0;
top: 70px;
bottom: 0;
overflow-y: scroll;
}
.sidebar::-webkit-scrollbar {
width: 0;
}
.sidebar-el-menu:not(.el-menu--collapse) {
width: 250px;
}
.sidebar > ul {
height: 100%;
}
</style>

2、子 siderbarItem

<template>
<div class="sidebarItem">
<el-submenu :index="subItem.index" :key="subItem.index">
<template #title>
<i :class="subItem.icon"></i>
<span>{{ subItem.title }}</span>
</template>
<template v-for="items in subItem.subs">
<template v-if="items.subs">
<!-- 递归渲染 -->
<sidebar-item
:key="items.index" :subItem="items"/>
</template>
<template v-else>
<el-menu-item :index="items.index" :key="items.index">{{ items.title }}</el-menu-item>
</template>
</template>
</el-submenu>
</div>
</template>
<script>
import { reactive ,toRefs } from 'vue'
export default {
props:{
subItem: {
type: String,
default: ''
}
},
setup(props) {
console.log(props,'2222')
const data = reactive({
subItem: props.subItem
})
return {
...toRefs(data)
};
},
};
</script>
<style scoped>
</style>