el-menu 手风琴模式下永远展开一个菜单不让其关闭

code鲨鱼辣椒

已于 2023-03-16 16:51:58 修改

阅读量2.3k

点赞数 1

文章标签： javascript 前端 vue.js elementui

于 2022-09-06 09:54:47 首次发布

本文链接：https://blog.csdn.net/weixin_44733223/article/details/126718769

版权

<template>
  <div>
    <el-menu
      ref="elMenuRef"
      class="menu-type"
      :unique-opened="true"
      @close="menuClose"
    >
      <el-submenu :index="`${index}`" :key="item.id" v-for="(item ,index) in menuList" >
        <template slot="title">
          <div @click="subHandleClick(item)">
            <span>{{ item.name}}</span>
          </div>
        </template>
        <el-menu-item
          :index="`${index}-${index2}`"
          :key="item2.id"
          v-for="(item2 , index2) in item.children"
          style="color:#54667a"
          @click="handleClick(item2)" >
          <span class="icon" :style="{background: item2.color }"></span>
          <span class="text">{{ item2.name }}</span></el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

  methods: {
    menuClose(index){
    //保留一个菜单总保持打开状态
      if(this.$refs.elMenuRef.openedMenus.length < 1){
        this.$refs.elMenuRef.open(index)
      }
    },
    handleClick(data){
      this.$emit('menuHandleClick',data)
    },
    subHandleClick(data){
      this.$emit('menuHandleClick',data)
      //取消当前导航选中项
      this.$refs.elMenuRef.activeIndex = null
    },

  },