el-menu导航常见报错解决方案：Missing required prop: "index"、点击一级菜单时不合上其他已展开菜单

2023-10-07 22:00:34

在项目开发过程中，使用element-UI的el-menu导航时，可能会遇到一些报错或无法预期的情况。本文将重点介绍两个常见的报错：

Missing required prop: "index"
点击一级菜单时不合上其他已展开菜单

1. Missing required prop: "index"

当出现此报错时，通常是因为在el-menu的子元素中缺少了index属性。index属性用于指定子元素在菜单中的索引位置，对于el-submenu（子菜单）来说，index属性是必填的。

解决方案：

为所有el-submenu子元素添加index属性，例如：

<el-menu>
  <el-menu-item index="1">首页</el-menu-item>
  <el-submenu index="2">
    <template #title>产品</template>
    <el-menu-item index="2-1">产品列表</el-menu-item>
    <el-menu-item index="2-2">产品详情</el-menu-item>
  </el-submenu>
</el-menu>

2. 点击一级菜单时不合上其他已展开菜单

当点击一级菜单时，其他已展开的菜单应该自动合上，但有时可能会出现不合上的情况。这是由于el-menu默认情况下，不会自动合上其他已展开的菜单。

解决方案：

可以通过设置default-active属性来解决此问题，该属性指定默认激活的菜单项。当设置default-active属性后，点击一级菜单时，其他已展开的菜单将自动合上。

<el-menu default-active="1">
  <el-menu-item index="1">首页</el-menu-item>
  <el-submenu index="2">
    <template #title>产品</template>
    <el-menu-item index="2-1">产品列表</el-menu-item>
    <el-menu-item index="2-2">产品详情</el-menu-item>
  </el-submenu>
</el-menu>