快捷導(dǎo)航

vue3+elementui-plus實現(xiàn)無限遞歸菜單示例代碼

更新時間：2024年04月25日 09:35:56 作者：青蒔吖

這篇文章主要介紹了vue3+elementui-plus實現(xiàn)無限遞歸菜單,當(dāng)一個組件的 key 值發(fā)生變化時,Vue 會認(rèn)為這是一個新的組件實例,會強制重新創(chuàng)建和渲染這個組件,本文通過示例代碼詳細講解,需要的朋友可以參考下

效果圖

實現(xiàn)方式是：通過給定的數(shù)據(jù)結(jié)構(gòu)層數(shù)來動態(tài)生成多級菜單

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>

下面的方法可以實現(xiàn)重置菜單選項為默認(rèn)項（需求場景：左側(cè)菜單切換時，上方菜單就要重置為默認(rèn)選項）

<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);
//監(jiān)聽切換事件
watch(() => stationsStore.stationId, (newValue, oldValue) => {
  menuKey.value += 1;
});

通過給el-menu添加:key="menuKey"實現(xiàn)。
實現(xiàn)原理：:key=“menuKey” 是 Vue 中的一個特殊語法，用于控制組件的重新渲染。當(dāng)一個組件的 key 值發(fā)生變化時，Vue 會認(rèn)為這是一個新的組件實例，會強制重新創(chuàng)建和渲染這個組件。

到此這篇關(guān)于vue3+elementui-plus實現(xiàn)無限遞歸菜單的文章就介紹到這了,更多相關(guān)vue3 elementui-plus遞歸菜單內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: