持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第7天，点击查看活动详情

处理左侧菜单

引言

通过之前一段时间 Express 和 Mysql 的学习

这里尝试来搭建一个 后台系统 来巩固下学习的技术。

处理左侧菜单

上一节，我们将项目中缺失的一些功能点， 面包屑 以及 横向导航栏 这两个功能进行了新增

这一节，我们来处理左侧菜单的bug

效果

这里先把左侧菜单的 bug 位置展示出来

可以看到左侧 菜单管理 这个导航中，它的右侧有一个小箭头

下面进行分析 bug 产生的原因

逻辑

逻辑如下：

在正常情况下，我们肯定是不希望这个箭头的产生，但是这个小箭头的产生，是因为什么呢？

其实我们在处理动态菜单的时候所产生的，它的主要的原因就是：

我们控制当前页面的权限按钮，即所谓的不应该展示的 第三级的菜单
但是呢，我们在处理左侧导航时，判断的时候又有点简单，即如果这个菜单下面有孩子，那么我们就会认为是一个父级菜单，不是一个最终的菜单
```
  <MenuTree :menuData="menuInfo.children"></MenuTree>
```

那么我们需要将这个 bug 问题进行解决

解决

所以我们处理的，主要的逻辑代码如下图：

<el-sub-menu v-if="!menuInfo.meta?.alone && menuInfo.children?.length" :index="menuInfo.path">
      <template #title>
        <svg-icon :iconName="menuInfo.meta?.icon ? menuInfo.meta?.icon : `icon-banbenqiehuan`" />

        <span>{{ menuInfo.meta?.title }}</span>
      </template>

      <MenuTree :menuData="menuInfo.children"></MenuTree>
    </el-sub-menu>
    <el-menu-item v-else :index="menuInfo.path">
      <svg-icon :iconName="menuInfo.meta?.icon ? menuInfo.meta?.icon : `icon-banbenqiehuan`" />
      <span>{{ menuInfo.meta?.title }}</span>
    </el-menu-item>

通过这个操作，我们即可解决这个 bug 问题

总结

通过 Express-Mysql-Vue3-TS-Pinia 做出一个 后台系统 项目

解决了项目中，左侧菜单的 bug 问题

后台项目 Express-Mysql-Vue3-TS-Pinia 处理左侧菜单

处理左侧菜单

引言

处理左侧菜单

效果

逻辑

解决

总结