element菜单一级菜单显示问题?

Question

这个是一级菜单 没有二级菜单 但是会显示二级菜单的展开收起的图标
如何让这个不显示?

主要代码:

 <el-menu
            :default-active="$router.path"
            class="el-menu-vertical-demo borderNone"
            @open="handleOpen"
            @close="handleClose"
            background-color="#fff"
            text-color="#000"
            active-text-color="#2a73fe"
            router
            :collapse-transition="false"
            :collapse="isCollapse"
          >
            <el-submenu
              :index="subMenu.name"
              v-for="subMenu in navigationData"
              :key="subMenu.menuId"
            >
              <template slot="title">
                <!-- <i class="el-icon-location" style="color:#fff"></i> -->

                <i :class="subMenu.icon" style="color:#000"></i>
                <span>{{ subMenu.name }}</span>
              </template>
              <!-- <el-menu-item-group> -->
              <el-menu-item
                :index="item.url"
                v-for="item in subMenu.list"
                :key="item.menuId"
              >
                <!-- <i class="el-icon-menu"></i> -->
                <span slot="title">{{ item.name }}</span>
              </el-menu-item>
              <!-- </el-menu-item-group> -->
            </el-submenu>
          </el-menu>

---

数据:

 "data": [
        {
            "menuId": 0,
            "parentId": 0,
            "name": "首页",
            "url": null,
            "perms": null,
            "type": 0,
            "icon": "el-icon-house",
            "orderNum": 0,
            "list": [],
            "parentName": null
        },
        {
            "menuId": 1,
            "parentId": 0,
            "name": "用户管理",
            "url": null,
            "perms": null,
            "type": 0,
            "icon": "el-icon-user",
            "orderNum": 0,
            "list": [
                {
                    "menuId": 2,
                    "parentId": 1,
                    "name": "用户列表",
                    "url": "/usermanagement",
                    "perms": null,
                    "type": 1,
                    "icon": null,
                    "orderNum": 1,
                    "list": null,
                    "parentName": null
                }
            ],
            "parentName": null
        },
        {
            "menuId": 8,
            "parentId": 0,
            "name": "订单管理",
            "url": null,
            "perms": null,
            "type": 0,
            "icon": "el-icon-tickets",
            "orderNum": 1,
            "list": [
                {
                    "menuId": 16,
                    "parentId": 8,
                    "name": "酒店管理",
                    "url": "/tavernPrice",
                    "perms": null,
                    "type": 1,
                    "icon": null,
                    "orderNum": 2,
                    "list": null,
                    "parentName": null
                },
                {
                    "menuId": 9,
                    "parentId": 8,
                    "name": "订单列表",
                    "url": "/caseinformation",
                    "perms": null,
                    "type": 1,
                    "icon": null,
                    "orderNum": 1,
                    "list": null,
                    "parentName": null
                }
            ],
            "parentName": null
        }
    ],

Answer 1

有这个就会有箭头, 外层加个div, 用v-if判断是否有二级

<div v-if="navigationData && navigationData.length">
    <el-submenu>
        ......
    </el-submenu>
</div>

Answer 2

<el-submenu>就是二级菜单，应该把这个去掉。

<el-menu>
    <el-menu-item index="1">1</el-menu-item>
    <el-menu-item index="2">Processing Center2</el-menu-item>
</el-menu>

Answer 3

判断菜单数据的list 是否为空，如果为空则是 <el-menu-item>,不为空是 <el-submenu>