在使用 elementplus 的菜单组件时，我发现有很多东西是官方没有提到但是需要注意的点

1. 菜单组件右侧会有一个边框

设置css

.el-menu {   border: 0 !important; }

2. 使用其他的 icon

文字内容一定要写在 这个 名字为 title 的插槽中

         //这个地方我使用的是 阿里巴巴图标库里面的图表                

3. 刷新不能回到对应的 活动样式失效

我这边使用的是 :class 加 设置 :default-active 

先是在 el-menu-item 中指定了 选中时的样式

  通过 getCurrentPath 这个函数获取到 当前的路径 ，并且 判断是否和当前的路径符合，来控制样式是否显示。

我这边的 getCurrentPath 这个函数里面 是因为 前面前缀是一样的，我只需要判断后面是否相等就行，之所以会这样写 是因为很多时候 我们左侧的路由 因为右边的内容页，再细分，但是呢，它是同属于一个大的路由的，它们会有一个公共的前缀部分，只需要保证公共前缀部分相等就行

const getCurrentPath = () => {   let currentPath = route.path.split("/");    // console.log(currentPath);    for (let i = 0; i < navList.length; i++) {     let path = navList[i].path.split("/");      if (flag === 0) {       if (path[2] == currentPath[2]) {         return navList[i].path;       }     }     else{       if (path[1] === currentPath[3]) {                  return navList[i].path;       }     }   } };

一般情况应该是这样，插一嘴，route 指的是 这个

import { useRoute } from "vue-router";  const route = useRoute();

const getCurrentPath = () => {      for (let i = 0; i < navList.length; i++) {     if(navList[i].path===route.path) return navlist[i].path     //其实就是判断 菜单的路由是否对的上当前路径   } };

然后 在 el-menu 中 需要设置 router 模式，也就是需要加上这个，设置默认路由 是 getCurrentPath() 就好（一定需要匹配的上 :index 里面的内容）

4. 修改高度等

element-plus 中很多样式都是设置了一个固定的值来设定css的一些参数，当我们需要修改这些的时候，我们发现使用 css 覆盖的效果微乎其微，其实我们可以自己修改这些值

很多都可以去检查里面找到，然后进行修改

:root {   --el-menu-item-height: 80px;//这个是每个子菜单高度   --el-menu-base-level-padding: 40px;//padding值   --el-text-color-primary: #8a8989;//文字颜色 }