el-menu导航报错Missing required prop: "index"、点击只有一级菜单时不合上其他已展开菜单

使用细节

目前企业开发项目,比较常用的UI框架大致有三个,elementUI、IView、AntD。当然还有别的UI框架,不过有的可能要收费。其实每个框架在使用的过程中,都会有对应的“坑”,其实所谓的“坑”就是官方文档写的不够详细,导致用户在使用的过程中的细节和官方文档定义的细节不一致。但是官方文档在维护的过程中,又不能用大白话来写,那样就太low了,所以官方文档中的部分组件的使用介绍文案会比较高大上,导致新使用此UI框架的用户会漏了什么东西。
“踩坑”其实就是总结经验的过程,为了方便大家更好的理解我写的这个案例,就把核心的代码贴出来。话不多少,先看最终效果

最终效果图

el-menu导航报错Missing required prop:
解说:导航栏有三个
1什么是外卖(只有一个一级导航)
2吃外卖的好处、2.1省自己烧饭时间、2.2省了刷锅时间、2.3省了跑腿时间(既有一级导航又有对应二级导航)
3吃外卖的坏处、3.1少了烧饭的乐趣、3.2外卖太贵了(也是既有一级导航又有对应二级导航)

步骤一(复制官方代码进行修改)

代码图示
el-menu导航报错Missing required prop:



别忘了要定义路由

el-menu导航报错Missing required prop:

问题一 el-submenu不加index的报错图

el-menu导航报错Missing required prop:
原因是index的属性值是定义组件时必须传入的。同时组件的@select也需要用到这个index

问题二 点击只有一级菜单时不自动合上其他已经展开的菜单

效果图如下

el-menu导航报错Missing required prop:
想要解决这个问题,就要用到组件提供的另外一个事件,@select事件,代码图如下
el-menu导航报错Missing required prop:

附带打印select回调函数接收的参数

el-menu导航报错Missing required prop:

你可能感兴趣的:(el-menu导航报错Missing required prop: "index"、点击只有一级菜单时不合上其他已展开菜单)