vue3+elementui-plus实现无限递归菜单示例代码
作者：青莳吖
这篇文章主要介绍了vue3+elementui-plus实现无限递归菜单,当一个组件的 key 值发生变化时,Vue 会认为这是一个新的组件实例,会强制重新创建和渲染这个组件,本文通过示例代码详细讲解,需要的朋友可以参考下
效果图
实现方式是：通过给定的数据结构层数来动态生成多级菜单
menu.vue
<template>
<el-menu
:default-active="activeIndex"
class="el-menu-demo"
mode="horizontal"
@select="handleSelect"
background-color="#f8f8f9"
style="margin-top: 20px;margin-left: 1px;"
>
<Childrenmenu v-for="menuItem in menuItems" :key="menuItem.value" :item="menuItem" />
</el-menu>
</template>
<script setup>
import Childrenmenu from "./childrenmenu";
const menuItems = [
{
value: '1',
label: '菜单1',
children: [
{
value: '1-1',
label: '子菜单1-1',
children: [
{ value: '1-1-1', label: '子菜单1-1-1' },
{ value: '1-1-2', label: '子菜单1-1-2' },
],
},
{ value: '1-2', label: '子菜单1-2' },
],
},
{
value: '2',
label: '菜单2',
children: [
{ value: '2-1', label: '子菜单2-1' },
{
value: '2-2',
label: '子菜单2-2',
children: [
{ value: '2-2-1', label: '子菜单2-2-1' },
{ value: '2-2-2', label: '子菜单2-2-2' },
],
},
],
},
{
value: '3',
label: '菜单3',
children: [
{
value: '3-1',
label: '子菜单3-1',
children: [
{
value: '3-1-1',
label: '子菜单3-1-1',
children: [
{ value: '3-1-1-1', label: '子菜单3-1-1-1' },
{ value: '3-1-1-2', label: '子菜单3-1-1-2' },
],
},
],
},
],
},
];
const handleSelect = async (key, keyPath) => {
console.log(key, keyPath)
}
</script>childrenmenu.vue
<template>
<template v-if="item.children">
<el-sub-menu :index="item.value">
<template #title>{{ item.label }}</template>
<Childrenmenu v-for="childItem in item.children" :key="childItem.value" :item="childItem" />
</el-sub-menu>
</template>
<template v-else>
<el-menu-item :index="item.value">{{ item.label }}</el-menu-item>
</template>
</template>
<script setup>
import { defineProps } from 'vue';
const props = defineProps(['item']);
</script>
<style scoped>
</style>下面的方法可以实现重置菜单选项为默认项（需求场景：左侧菜单切换时，上方菜单就要重置为默认选项）
<el-menu
:key="menuKey"
:default-active="activeIndex"
class="el-menu-demo"
mode="horizontal"
@select="handleSelect"
background-color="#f8f8f9"
style="margin-left: 1px;"
>
<Childrenmenu v-for="menuItem in menuItems" :key="menuItem.value" :item="menuItem" />
</el-menu>
<script setup>
const menuKey = ref(0);
//监听切换事件
watch(() => stationsStore.stationId, (newValue, oldValue) => {
menuKey.value += 1;
});通过给el-menu添加:key="menuKey"实现。
实现原理：:key=“menuKey” 是 Vue 中的一个特殊语法，用于控制组件的重新渲染。当一个组件的 key 值发生变化时，Vue 会认为这是一个新的组件实例，会强制重新创建和渲染这个组件。
到此这篇关于vue3+elementui-plus实现无限递归菜单的文章就介绍到这了,更多相关vue3 elementui-plus递归菜单内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！