【ElementUI】vue3+element-plus引入导航菜单的问题记录

这两天在搞网站的菜单模块， 前端用的vue3+elementUI，使用时，发现官网很多内容跟最新版本匹配不上，引入的时候会出现很多问题，尤其是elementUI的导航菜单这一块

问题1：子菜单无法正常显示

首先，第一个问题，引入后，子菜单无法正常显示出来

引入代码

<h5>自定义颜色</h5>
  <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
      background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
    <el-submenu index="1">
      <template slot="title">
        <i class="el-icon-location"></i>
        <span>导航一</span>
      </template>
      <el-menu-item-group>
        <template slot="title">分组一</template>
        <el-menu-item index="1-1">选项1</el-menu-item>
        <el-menu-item index="1-2">选项2</el-menu-item>
      </el-menu-item-group>
      <el-menu-item-group title="分组2">
        <el-menu-item index="1-3">选项3</el-menu-item>
      </el-menu-item-group>
      <el-submenu index="1-4">
        <template slot="title">选项4</template>
        <el-menu-item index="1-4-1">选项1</el-menu-item>
      </el-submenu>
    </el-submenu>
    <el-menu-item index="2">
      <i class="el-icon-menu"></i>
      <span slot="title">导航二</span>
    </el-menu-item>
    <el-menu-item index="3" disabled>
      <i class="el-icon-document"></i>
      <span slot="title">导航三</span>
    </el-menu-item>
    <el-menu-item index="4">
      <i class="el-icon-setting"></i>
      <span slot="title">导航四</span>
    </el-menu-item>
  </el-menu>
</template>

显示效果

对比官网的运行效果，可以看到，整个导航栏一都被吞了，一开始我还以为是我安装的element-plus有问题，各种升级，后来发现原来是vue3+element-plus的写法不同，element-plus需要调整写法

原因及方案

导致子菜单无法展示的原因在于el-submenu标签，vue3+element-plus的写法应修改为el-sub-menu

官网代码：

<el-submenu index="1-4">
   <template slot="title">选项4</template>
   <el-menu-item index="1-4-1">选项1</el-menu-item>
</el-submenu>

需要调整为：

<el-sub-menu index="1-4">
    <template slot="title">选项4</template>
    <el-menu-item index="1-4-1">选项1</el-menu-item>
</el-sub-menu>

问题2：具名插槽的内容无法显示

显示效果

如下图，修改后，导航一、分组一、选项4的内容没有正常显示

问题原因

检查引入的代码，可以发现这一部分的代码都使用了具名插槽（黄色部分是官网提供的不使用插槽的另一种写法）

解决方案

对应该问题，需要修改一下具名插槽的写法，将slot="title"改为#title或者v-slot:title

官网代码：

<template slot="title">
   <i class="el-icon-location"></i>
   <span>导航一</span>
</template>

需要调整为：

方案一：

<template v-slot:title>
  <i class="el-icon-location"></i>
  <span>导航一</span>
</template>

方案二：

<template #title>
  <i class="el-icon-location"></i>
  <span>导航一</span>
</template>

问题3：icon图标无法显示

显示效果

上述问题调整后，展示效果如下图，可以看到导航菜单的icon全部都没有显示

问题原因

检查icon引入的代码，写法为i标签内引用el-icon-menu的class属性，但这是旧的写法，搜了一下，得改成vue3的最新写法

解决方案

vue3+element-plus最新写法用的不是i标签，需要改成通过el-icon引入

官网代码：

<el-menu-item index="2">
	<i class="el-icon-menu"></i>
	<span slot="title">导航二</span>
</el-menu-item>

需要调整的地方：

首先，需要在script中引入对应的图标并在components中注册：

<script>
import { Location,Menu, Document, Setting} from '@element-plus/icons-vue'
  export default {
    components: {Location, Menu, Document, Setting},
  }
</script>

其次，在template中调整写法：

<el-menu-item index="2">
	<el-icon><Menu></Menu></el-icon>
	<span slot="title">导航二</span>
</el-menu-item>

问题4：分组名称左侧有大量留白

显示效果

问题原因

首先，分组名本身是写在插槽内部的文本

官网代码：

<el-menu-item-group>
    <template slot="title">分组一</template>
    <el-menu-item index="1-1">选项1</el-menu-item>
    <el-menu-item index="1-2">选项2</el-menu-item>
</el-menu-item-group>

我试着在文本外层加了个p标签，并设置了文字位置居左，可以正常显示了

并且，我试着在el-sub-menu、el-menu-item-group以及el-sub-menu的插槽内都放了p标签；可以看到，el-sub-menu、el-menu-item-group下的p标签都是居中的，但是el-sub-menu的插槽内的p标签是居左的；

所以应该整体是本身文案是居中的，但是可能el-sub-menu内插槽做了处理（瞎猜的）

解决方案

方案一：

插槽内加p标签并设置文字位置，如下：

  <el-menu-item-group>
    <template #title><p style="text-align: left">分组1</p></template>
    <el-menu-item index="1-1">选项1</el-menu-item>
    <el-menu-item index="1-2">选项2</el-menu-item>
  </el-menu-item-group>

方案二：
给el-menu-item-group加样式调整文字位置，如下：

  <el-menu-item-group title="分组2" style="text-align: left">
    <el-menu-item index="1-3">选项3</el-menu-item>
  </el-menu-item-group>

问题5：菜单栏边缘不对齐

显示效果

问题原因

问题在于elementUI本身的–el-menu-border-color属性，下图可以看到，勾掉后就正常了

解决方案

在代码里把这个属性值设置为none即可：

<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
      background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" 
      style="--el-menu-border-color:none">

最终显示效果

修改后的最终显示效果如下，分组部分的文案左侧的留白问题还没解决，我再研究一下…（今日已解决，上面有，现在实现效果已与官网一致）

调整后的最终代码

<template>
  <h5>自定义颜色</h5>
  <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
      background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
    <el-sub-menu index="1">
      <template v-slot:title>
        <el-icon><Location></Location></el-icon>
        <span>导航一</span>
      </template>
      <el-menu-item-group>
        <template #title><p style="text-align: left">分组1</p></template>
        <el-menu-item index="1-1">选项1</el-menu-item>
        <el-menu-item index="1-2">选项2</el-menu-item>
      </el-menu-item-group>
      <el-menu-item-group title="分组2" style="text-align: left">
        <el-menu-item index="1-3">选项3</el-menu-item>
      </el-menu-item-group>
      <el-sub-menu index="1-4">
        <template #title>选项4</template>
        <el-menu-item index="1-4-1">选项1</el-menu-item>
      </el-sub-menu>
    </el-sub-menu><!-- #title -->
    <el-menu-item index="2">
      <el-icon><Menu></Menu></el-icon>
      <span slot="title">导航二</span>
    </el-menu-item>
    <el-menu-item index="3" disabled>
      <el-icon><Document></Document></el-icon>
      <span slot="title">导航三</span>
    </el-menu-item>
    <el-menu-item index="4">
      <el-icon><Setting></Setting></el-icon>
      <span slot="title">导航四</span>
    </el-menu-item>
  </el-menu>
 </template>

最后再贴一个别人的踩坑链接，也许我后续用得上…
链接：https://gitcode.csdn.net/