【求助】vue element 如何把这样形式的侧边菜单设置为一级菜单，已附代码，图片

Question

问题：想把二级菜单的“仪表盘”，更改为一级菜单，不知道该如何解决

想要的效果如下：
——仪表盘（PS：一级菜单）
——系统管理（PS：一级菜单）
————系统管理（PS：二级菜单）

---

1、目前侧边菜单效果如下：

2、数据结构如下：

3、前端代码如下：

<el-menu
          collapse-transition
          :default-active="$route.path"
          class="aside-menu-test"
          background-color="#252c41"
          active-text-color="#FF6666"
          text-color="#BFCBD9"
          router
          :collapse="collapse"
        >

          <template v-for="(item,index) in $router.options.routes" v-if="item.menu=='true'">

            <el-submenu :index="item.name">
                <template slot="title">
                    <i :class="item.icon"></i>
                    <span slot="title">{{item.title}}</span>
                </template>
                <el-menu-item @click="clickroute(child.path)" v-for="(child,indexs)  in item.children" :index="child.path" :key="child.path"
                 v-if="child.menu=='true'">{{child.title}}</el-menu-item>
            </el-submenu>


          </template>
        </el-menu>

---

补充内容：

1、在数据库中添加字段用来判断是否是一级菜单

2、前端代码修改如下

<el-menu
          collapse-transition
          :default-active="$route.path"
          class="aside-menu-test"
          background-color="#252c41"
          active-text-color="#FF6666"
          text-color="#BFCBD9"
          router
          :collapse="collapse"
        >

          <template v-for="(item,index) in $router.options.routes" v-if="item.menu=='true'">

            <template v-if="item.content == '1'">
               <el-menu-item :index="item.path" :key="item.path" @click="clickroute(item.path)">
                 <i :class="item.icon"></i>
                 <span slot="title">{{item.title}}</span>
               </el-menu-item>
            </template>

            <template v-else>
              <el-submenu :index="item.name">
                <template slot="title">
                  <i :class="item.icon"></i>
                  <span slot="title">{{item.title}}</span>
                </template>
                <el-menu-item @click="clickroute(child.path)" v-for="(child,indexs)  in item.children" :index="child.path" :key="child.path"
                 v-if="child.menu=='true'">{{child.title}}</el-menu-item>
              </el-submenu>
            </template>


          </template>
        </el-menu>

3、效果如图

可以变成想要的效果，但是点击后，菜单不能高亮

Answer 1

你这个只有多级的 根据自己级别判断下例如item.node

<template v-if="item.node">
        <!-- 多级菜单 -->
        <el-submenu>
            ...
        </el-submenu>
    </template>
    <template v-else>
        <!-- 一级菜单 -->
        <el-menu-item>
            ...
        </el-menu-item>
    </template>