vue3+elementui-plus实现无限递归菜单-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue3+elementui-plus实现无限递归菜单。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

效果图
vue3+js elementplus的menu菜单无限,elementui,vue.js,前端

vue3+js elementplus的menu菜单无限,elementui,vue.js,前端

实现方式是：通过给定的数据结构层数来动态生成多级菜单

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 会认为这是一个新的组件实例，会强制重新创建和渲染这个组件。文章来源地址https://www.toymoban.com/news/detail-856950.html

到了这里，关于vue3+elementui-plus实现无限递归菜单的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！