当前位置: 首页 > Web前端 > HTML5

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

时间:2023-04-05 20:18:21 HTML5

el-menunavigationerrorMissingrequiredprop:"index",只点击一级菜单时,其他展开的菜单无法关闭当然还有其他的UI框架,但有些可能是收费的。其实每个框架在使用过程中都会有相应的“坑”。其实所谓的“坑”就是官方文档不够详细,导致用户使用过程的细节和官方文档定义的细节不一致。但是在官方文档的维护过程中,不能大白话写,太low了,所以官方文档中一些组件的使用介绍文案会比较高大上,导致刚接触这个UI框架的用户怀念什么。“踩坑”其实就是总结经验的过程。为了方便大家更好的理解我写的案例,我把核心代码贴出来。话不多说,先看看最终效果吧。最终效果图说明:一共有三个导航栏1什么是外卖(只有一级导航)2吃外卖的好处,2.1节省做饭时间,2.2节省做饭时间,2.3节省跑腿时间(均为一级导航)以及对应的二级导航)3吃外卖的缺点,3.1做饭乐趣少,3.2外卖太贵(也有一级导航和对应的二级导航)第一步(复制官方代码修改)代码icon节省烹饪时间节省烹饪时间保存差事时间吃外卖的坏处烹饪乐趣少外卖太贵了

别忘了定义路由问题——el-submenu没有添加index错误映射,因为index的属性值为组件的@select在定义的时候也必须传入成分。索引问题也需要用到。其次,当只点击一级菜单时,其他展开的菜单不会自动关闭。效果图如下为了解决这个问题,组件提供了另外一个事件,@select事件,代码图如下,带有printselect回调函数接收到的参数