前言

在进行项目的开发过程中我们一般会使用Element-plus来辅助我们进行开发，目的就是在于节省开发时间，但是最近在进行后台系统的开发过程中还是踩了一些坑，看看大伙有没有遇到和我一样情况的，如果有希望能帮助到大家

el-menu在展开时候的卡顿情况⛹️‍♀️⛹️‍♀️

我们在进行后台程序开发过程中肯定会使用侧边栏进行展开折叠的操作，我就遇到了一个比较奇怪的bug，挡在折叠的时候很丝滑，没有什么异常情况，但是当展开的时候聚会遇到卡顿的情况，也不知道这是为什么。

先展示我的代码：

 <!--侧边菜单部分-->
<div class='app-wrap'>
    <div
      class="sidebar-container"
      :class="[$store.getters.sideBarOpened ? 'unfold' : 'fold']">
      <SideBar />
 </div>
   <div
      class="main-container"
      :class="[$store.getters.sideBarOpened ? 'fold' : 'unfold']"
    >
      <div class="fixed-header">
        <!-- 头部 -->
        <NavHeader></NavHeader>
      </div>
      <!-- 主题部分 -->
      <AppMain></AppMain>
    </div>
</div> 

这是整体的布局部分，样式也比较简单。

.app-wrap {
  position: relative;
}
.fixed-header {
  height: 50px;
}
// 右侧内容(主要部分)
.main-container {
  transition: margin-left 0.3s;
  margin-left: 210px;
  &.unfold {
    margin-left: 64px;
  }
  &.fold {
    margin-left: 210px;
  }
}
.sidebar-container {
  width: 210px;
  height: 100vh;
  position: fixed;
  transition: width 0.3s;
  overflow: hidden;
  // 折叠
  &.fold {
    width: 64px;
  }
  // 展开
  &.unfold {
    width: 210px;
  }
}

就如上面所示，样式只是简单的布局操作，侧边栏使用了fixed定位，并且进行了一个简单的过渡效果的渲染,而右侧的Navbar也很简单，就是根据折叠操作来调整相应的margin-left，同样也是使用过渡效果进行处理，而我也使用了Vuex，定义了一个属性，这个属性就是判断当前左侧的菜单栏是否展开，然后定义了一个点击事件，每次点击之后修改vuex中的共享属性。然后在这里根据这个属性值来动态的添加样式，进行折叠展开操作，这些都不是重点，重点就在于这个bug，下面让我来展示一下这个bug:

可以明显发现其中的bug，这导致使用体验极差，作为前端开发，我们绝对不允许有这样的情况出现，于是我上网查阅资料，说来奇怪，起初我在网上找到的答案基本都是让我更改一下el-menu中的属性，但是当时没有什么用处（很难以常理解释，但最后就是改这个样式解决了）

但是最后饶了一圈还是回到了原点，就是添加一个element-plus官网上关于e-menu中的一个属性设置

<el-menu
    :text-color="$store.getters.globalCss.menuText"
    :background-color="$store.getters.globalCss.menuBg"
    :active-text-color="$store.getters.globalCss.menuActiveText"
    :default-active="MenuActive"
    :collapse="!$store.getters.sideBarOpened"
    :collapse-transition="false"
    router
    class="side-menu"
   ></el-menu>

主要就是添加了这个属性:collapse-transition="false"，这个属性的就是是否开启折叠动画效果，如果我们不进行设置，默认时开启的，现在我们将el-menu这个默认的效果关闭。使用之后就解决了这个问题，给出的解释就是可能是和我们自己定义的过渡效果相冲突了所以就使用这个属性关闭el-menu自带的过渡效果，这样就可以得到解决了

还是比较奇怪的（我指的是改bug的过程），这个过程很奇怪，有可能改了半天没一点效果，还是回到最初的情况，稍微调整一下就出来了

el-menu折叠之后svg图标不显示

这个bug更是有意思，以至于我开始怀疑使是我自己组件出的问题，这个bug是花费我我时间最长的，让我们一起来看一下:

在这里我使用了自己封装的svg组件（这个我之前讲过，如果不会的可以看我这篇文章），然后在这个侧边栏中使用的时候就遇到了下面的这个bug，很奇怪，要是说我svg组件封装的有问题，为什么有些svg图标可以展示，但是折叠之后就不可以，于是我刚开始将自己的svg图标全部替换成了element-plus官网的el-icon,发现替换之后确实是没有问题，可以正常的展示，但是那样以来自己封装的svg组件就成徒劳了，于是就开始上网查找有没有人遇到了和我相同的情况。

上网找了很多的解决办法是这样的

<el-menu-item v-else :index="Menu.path">
    <svg-icon :icon="Menu.meta.icon"></svg-icon>
    <template #title>
      <span>{{ Menu.meta.title }}</span>
    </template>
  </el-menu-item>

就是说在el-menu-item中svg-icon这个组件不能写在<template #title>里面,这个确实可以解决一部分问题，但是对于我来说，他没有完全解决我的问题，因此我继续在网上寻找答案。但是都不是很满意，直到我遇到了这个解决方案：

.el-sub-menu {
  // 看csdn上的大佬解决方案，可以解决
  display: grid;
  width: 100%;
}

这个方法是我在csdn上面看到一个大佬提出的，虽然这行带代码很简洁，但是对我来说却无比有效（虽然我也不知道这到底是怎么解决的），这个代码添加上之后，bug就奇迹般的解决了，于是我就想要写一遍文章，今后如果还遇到类似的情况，可以参考这个解决方法。

最终效果展示🛰🛰

总结

这篇文章就是总结了一下自己在开发项目的过程中使用element-plus中的el-menu中的遇到的bug，以及他们的解决方案，大家如果遇到这种情况不妨试试，如果能帮到大家不胜荣幸